正文 

当前位置： 首页 > 知识 >

Bootstrap/Stylus - 使表格列尽可能小

     2023-03-05     300

关键词：

【中文标题】Bootstrap/Stylus - 使表格列尽可能小【英文标题】：Bootstrap/Stylus - Make Table Column as small as possible 【发布时间】：2014-04-02 17:26:28 【问题描述】：

我正在练习使用 Bootstrap 来让我的表格在我正在创建的搜索列表上做出响应，问题是我希望我的两个列尽可能小而不是大小相等。 在下图中，您可以看到 Date 和 Link 占用了比他们需要的更多的空间。我该如何解决这个问题？提前致谢！

HTML（截断）：

<div class="table-responsive">
    <table class="table table-striped table-hover table-bordered table-condensed">
        <tbody>
            <tr class="active" ng-repeat="s in results">
                <!-- <td class="hidden-xs hidden-sm">$index</td> -->
                <td class="hidden-xs hidden-sm">s.provider</td>
                <td>s.title</td>
                <td>s.date</td>
                <td class="hidden-xs hidden-sm">s.cat</td>
                <td><a href="s.link">D/L</a></td>
            </tr>
        </tbody>
    </table>
</div>

手写笔：

table
    table-layout fixed
    word-wrap break-word

【问题讨论】：

【参考方案1】：

设置table-layout: auto; 应该可以解决问题。

这是一个演示：http://jsfiddle.net/NicoO/m3QWJ/1/

【讨论】：

使用 HTML/CSS 使表格在移动设备上响应

】使用HTML/CSS使表格在移动设备上响应【英文标题】：MaketableresponsiveonmobiledevicesusingHTML/CSS【发布时间】：2019-02-2212:57:45【问题描述】：我有这张表，它是较大电子邮件的一部分。当用户的设备是手机或小屏幕时，我希望表格从2... 查看详情

如何使 CreateFile 尽可能快

】如何使CreateFile尽可能快【英文标题】：HowtomakeCreateFileasfastaspossible【发布时间】：2011-11-1720:38:19【问题描述】：我需要在启动时读取数千个小文件的内容。在linux上，只使用fopen和阅读速度非常快。在Windows上，这发生得非常缓... 查看详情

如何使 JPanel 中的组件尽可能伸展？

】如何使JPanel中的组件尽可能伸展？【英文标题】：HowtomakecomponentsinaJPanelstretchasfaraspossible?【发布时间】：2015-07-0816:15:57【问题描述】：我正在尝试创建一个简单的挥杆程序，让用户玩一个圆圈。这是我的代码：importjavax.swing.JFr... 查看详情

CSS 让表格列占用尽可能多的空间，而其他列则尽可能少

】CSS让表格列占用尽可能多的空间，而其他列则尽可能少【英文标题】：CSStomakeatablecolumntakeupasmuchroomaspossible,andothercolsaslittle【发布时间】：2010-09-1205:30:31【问题描述】：我需要用CSS布局一个html数据表。表格的实际内容可能不同... 查看详情

允许 HTML 表格尽可能宽

】允许HTML表格尽可能宽【英文标题】：AllowHTMLtabletobeaswideasitcan【发布时间】：2020-04-2700:56:22【问题描述】：我正在创建一个&lt;table&gt;和它的容器(&lt;div&gt;)。想法是表格是“放松的”，占用它需要的空间，容器将是... 查看详情

使容器 div 根据需要占用尽可能多的空间

】使容器div根据需要占用尽可能多的空间【英文标题】：makecontainerdivtakeupasmuchspaceasneeded【发布时间】：2020-08-0803:42:42【问题描述】：我有一个包含另一个容器的容器div。如果屏幕尺寸允许，我希望我的外部容器能够占用所需的... 查看详情

使其中一个线程等待尽可能少（几乎为零）的时间

】使其中一个线程等待尽可能少（几乎为零）的时间【英文标题】：Makingoneofthethreadstowaitforleastpossible(almostzero)time【发布时间】：2014-07-2719:38:42【问题描述】：有一个清单。两种类型的线程在列表上运行（在独占访问列表后，因... 查看详情

java示例代码_SWING JTable：如何使每行尽可能高'；这是最高的物体

java示例代码_SWING JTable：如何使每行尽可能高'；这是最高的物体 查看详情

display: inline-block 不会使包装内容的宽度尽可能小

】display:inline-block不会使包装内容的宽度尽可能小【英文标题】：display:inline-blockdoesnotmakewidthassmallaspossiblewithwrappedcontents【发布时间】：2017-05-1408:16:37【问题描述】：我有一个div，上面设置了inline-block和max-width，以及一些可能包... 查看详情

如何截断表格单元格，但要尽可能多地容纳内容？

】如何截断表格单元格，但要尽可能多地容纳内容？【英文标题】：HowcanItruncatetablecells,butfitasmuchascontentpossible?【发布时间】：2011-07-1112:26:14【问题描述】：认识弗雷德。他是一张桌子：<tableborder="1"style="width:100%;"><tr><... 查看详情

如何让表格单元格在一行中显示尽可能多的文本，例如 GMail 和 Google Reader？

】如何让表格单元格在一行中显示尽可能多的文本，例如GMail和GoogleReader？【英文标题】：Howdoyoumaketablecellsshowasmuchtextasfitsinoneline,likeGMailandGoogleReader?【发布时间】：2011-08-2506:14:47【问题描述】：制作表格（不一定使用表格标签... 查看详情

支持向量机（svm）选择训练方式使误差率尽可能减为0(代码片段)

今天看了有关支持向量机（Supportvectormachine，简称SVM）用来分类的内容，分别实现了对于判别城市消费水平和乳腺癌诊断的问题，在做乳腺癌诊断时，误差率问题卡壳了一个晚上，始终保持在0.014水平，无法减小到0。结果连SVM的... 查看详情

ruby作为程序员，您应该始终努力使代码尽可能可读。在这次挑战中，我们将专注于良好的标志(代码片段)

查看详情

ruby作为程序员，您应该始终努力使代码尽可能可读。在这次挑战中，我们将专注于良好的标志(代码片段)

查看详情

如何使背景图像和表格响应？

】如何使背景图像和表格响应？【英文标题】：Howtomakebackgroundimageandtableresponsive?【发布时间】：2020-04-0306:55:51【问题描述】：我已经完成了一个简单的HTML模板，其中有4个背景图像以及背景图像上的一些文本和表格。我想知道如... 查看详情

使表格内容响应屏幕大小

】使表格内容响应屏幕大小【英文标题】：Makingtablecontentresponsivetoscreensize【发布时间】：2016-01-0112:09:26【问题描述】：我正在制作一个包含图片和文本内容（四行五列）的表格，并且正在寻找使内容适应屏幕而无需从左向右滚... 查看详情

使 html 表格元素响应水平滚动

】使html表格元素响应水平滚动【英文标题】：Makinghtmltableelementsresponsiveforhorizontalscroll【发布时间】：2019-05-2202:41:06【问题描述】：我知道互联网上有很多关于此的内容，但我似乎无法让我的表格中的元素响应水平滚动的应用程... 查看详情

如何使表格单元格根据内容缩小？

】如何使表格单元格根据内容缩小？【英文标题】：Howtomaketablecellshrinkaccordingtothecontent?【发布时间】：2012-07-0922:22:49【问题描述】：如何使有2列（单元格）的表格看起来像这样：第一个单元格根据内容缩小另一个单元格适合表... 查看详情