正文 

当前位置： 首页 > 知识 >

css显示：表格第一列太宽

     2023-03-11     146

关键词：

【中文标题】css显示：表格第一列太宽【英文标题】：css display:table first column too wide 【发布时间】：2011-02-12 19:04:34 【问题描述】：

我有一个这样的 css 表设置：

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

表格的css是：

.table
 display:table;
 width:100%;

.table div
 text-align:right;
 display:table-row;
 border-collapse: separate;
 border-spacing: 0px;

.table div span:first-child 
 text-align:right;

.table div span 
 vertical-align:top;
 text-align:left;
 display:table-cell;
 padding:2px 10px;

就目前而言，两列在表格宽度所占据的空间之间平均分配。我试图让第一列的宽度与占据它的单元格的文本一样宽

表格的宽度未知，列/单元格也是如此。

【问题讨论】：

border-collapse 和 border-spacing 仅适用于表到表行。您应该将它们移至.table 规则。注意：有什么特殊原因您实际上没有使用桌子吗？ 不使用 html 表，因为代码存在于整个站点并且是通过一些 ajax 生成的。我只是保持简单，因为 ajax 和 php 与问题无关。 但是生成嵌套的 div 和 span 肯定与生成带有 trs 和 tds 的表没有什么不同？这（以及处理这些 CSS 表格问题）比仅通过 AJAX 输出表格更容易吗？ 这主要是出于“主题”的原因，我正在开发的网站有用户可自定义的主题。表 trs 和 tds 需要更新相当广泛的主题代码。另外（虽然我可能弄错了，css 还不是我非常擅长的东西）它可能会弄乱嵌套 div 和 span 的继承。在这一点上，这样做似乎更容易。 【参考方案1】：

只要给它一个小的宽度，比如1px。表格单元格总是扩展为尽可能小的尺寸以适应其内容。

【讨论】：

这个已经试过了，它使宽度只和最长的单词一样宽。如果单元格有 3-5 个单词，浏览器将尽可能换行以使单元格尽可能窄。 尝试添加空格="nowrap" 那你还需要加上white-space: nowrap来停止换行。 不知道空格：nowrap;这解决了问题。谢谢 我的桌子中间只有一列也遇到了同样的问题，但感谢这里的建议，问题解决了。 【参考方案2】：

您应该将您的班级名称“table”更改为其他名称。 "table" 表示它是某个表而不是 div 的类。

尝试关注

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>

【讨论】：

【参考方案3】：

您可以使用 first-child 选择器在表格中找到第一个 div 并给它一个单独的 with。

.table div:first-child

    width:30%;

【讨论】：

【参考方案4】：

我不知道如果文本的大小因行而异，您可以将其设为文本大小，但您可以尝试为列设置宽度 =“auto”或百分比宽度。

【讨论】：

【参考方案5】：

试试 -> table-layout: fixed

【讨论】：

你的传奇。这解决了我遇到的细胞脱离容器的问题。 你把这个放在哪里？ 这在 .table 中，它使所有表格列与其他列的宽度一致。

css让表格第一列和第一行固定

用css让表格左右移动滚动条的时候第一列固定，上下移动滚动条的时候第一行固定。并且浏览器兼容，麻烦提供全网页代码。参考技术A给你提供个思路：第一行为一行多列的表格；第一列为一列多行的表格；剩下就是一个表格... 查看详情

滚动时如何锁定表格的第一行和第一列，可能使用 JavaScript 和 CSS？

】滚动时如何锁定表格的第一行和第一列，可能使用JavaScript和CSS？【英文标题】：HowcanIlockthefirstrowandfirstcolumnofatablewhenscrolling,possiblyusingJavaScriptandCSS?【发布时间】：2010-09-2216:48:30【问题描述】：当您激活“冻结窗格”时，如何... 查看详情

CSS表格中第一行和第一列的每个单元格的不同背景颜色

】CSS表格中第一行和第一列的每个单元格的不同背景颜色【英文标题】：Differentbackground-colorforeachcellofthefirstrowandfirstcolumninaCSStable【发布时间】：2016-03-2410:36:24【问题描述】：我正在尝试为表格的第一行和第一列的每个单元格添... 查看详情

如何使用 HTML/CSS 创建第一列固定的表？

...7-06-1904:08:13【问题描述】：我想创建一个可以水平滚动的表格。列数是动态的。我想在水平滚动表格时实现第一列需要固定/冻结。我尝试了以下CSS。第一列是固定的，但第二、第三列隐藏在固定列之下。.mydivoverflow-y:scroll;.he 查看详情

表格添加一行并在每行第一列大写字母显示jquery实现方法

表格添加一行并在每行第一列大写字母显示jquery实现方法<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text 查看详情

冻结表格的第一行和第一列

】冻结表格的第一行和第一列【英文标题】：Freezefirstrowandfirstcolumnoftable【发布时间】：2017-12-1716:09:01【问题描述】：我正在尝试冻结/锁定表格的第一行和第一列。我试过给theadposition:absolute;或position:fixed;，但看起来很奇怪。我... 查看详情

如何使 CSS 表格适合屏幕宽度？

】如何使CSS表格适合屏幕宽度？【英文标题】：HowcanImakeaCSStablefitthescreenwidth?【发布时间】：2011-05-1308:01:09【问题描述】：当前表格太宽，导致浏览器添加水平滚动条。【问题讨论】：@define表格的宽度然后你不会得到水平条。@al... 查看详情

latex表格太宽处理方法(howtoshortenlatextablelength)

当表格太宽时,为了能在页面中显示完整,可以缩小表格,或者横排.缩小表格的好处是,不用倒转页面阅读,坏处是原始宽度不同的表格,被缩小后,字体不一,不美观.虽然可以调整参数使得所有表格字体一致,但是非常不方便.横排则可以... 查看详情

如何用css实现表格第一列固定其余内容横向滚动

最好是能给这列td或th单独定义css或js控制，这样比较好，有没有这种定义的呀可以参考此样例：.tablewidth:100%;overflow-x:scroll;background-color:#7c95b5;.fixedTablewidth:160%;text-align:center;color:#fff;font-size:14px;border-collapse:collapse;.fixedTabletrline-heigh... 查看详情

word中给表格第一列加序号

插入表格后，选中第一列，选编号 然后定义新的编号格式  查看详情

latex版本图片太宽,一列放不下，该怎么办？

如图，该怎么让图一按照图二的方式放进去，latex下该怎么做图一图二参考技术A试试看这个\beginfigure*...\endfigure*\begintable*...\endtable* 查看详情

水平滚动的 HTML 表格（第一列固定）

】水平滚动的HTML表格（第一列固定）【英文标题】：HTMLtablewithhorizontalscrolling(firstcolumnfixed)【发布时间】：2011-03-2501:21:52【问题描述】：我一直在想办法制作一个第一列固定的表格（表格的其余部分有水平溢出）我看到了一个有... 查看详情

excel表格中，第一列是人名，如何在第二列显示人名的拼音字头？

...A在一个表格中，第一列是几百个人名，需要在第二列中显示人名的拼音字头。得到类似下面的样子姓名　　拼音张三　　zs李四　　ls本回答被提问者采纳 参考技术B以Excel2010版为例，假设A列为汉字，B列显示拼音，操作如下：第... 查看详情

具有固定标题和固定列的 HTML 表格？ [关闭]

...：2010-10-1514:44:44【问题描述】：是否有CSS/JavaScript技术来显示一个长的HTML表格，以便列标题在屏幕上保持固定，第一列保持固定并随着数据滚动。我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。... 查看详情

多行文本的溢出省略后,表格中的数据都挤到了第一列(代码片段)

...l;-webkit-line-clamp:2;overflow:hidden;造成从数据库获取数据后，表格中的数据都挤到了第一列。如图改成了td里面的内容再包一个div，然后把给td的css给了这个div#overflowdisplay:-webkit- 查看详情

jQuery：获取 HTML 表格第四行（仅）的第一列值

】jQuery：获取HTML表格第四行（仅）的第一列值【英文标题】：jQuery:GetFirstColumnValueonFourthRow(only)ofHTMLTable【发布时间】：2012-06-0312:34:19【问题描述】：我有一个名为resultGridTable的表。我有一个要在表的每一行上执行的jQuery函数。... 查看详情

HTML表格第一列在水平滚动时固定[重复]

】HTML表格第一列在水平滚动时固定[重复]【英文标题】：HTMLTablefirstcolumnfixedwhilescrollinghorizontal[duplicate]【发布时间】：2020-07-2721:36:41【问题描述】：我创建了一个HTML表格：<tableid="customers"class="tabletable-bordered"><thead><tr&... 查看详情

如何使双列表格响应第二列在第一列之下？

】如何使双列表格响应第二列在第一列之下？【英文标题】：Howtomakeatwocolumnstableresponsivewithsecondcolumngoingunderfirstone?【发布时间】：2018-03-1006:58:00【问题描述】：我正在使用在线编辑器创建网站。我有一个两列一行的简单表格。... 查看详情