在 <table> 中制作等宽的列答案

【问题标题】：Make columns of equal width in <table>在 <table> 中制作等宽的列
【发布时间】：2013-12-20 22:26:17
【问题描述】：

如何在<table> 中制作等宽的列？

我正在动态更改列数。今天我有13个专栏。明天升到16。我特别不想重新计算。

【问题讨论】：

标签： html css

【解决方案1】：

在HTML table: keep the same width for columns找到这个

如果设置样式表-布局：固定；在你的桌子上，你可以覆盖浏览器的自动列大小调整。浏览器会然后根据第一行单元格的宽度设置列宽桌子。更改您的并删除内部，然后为 .
中的单元格设置固定宽度

【讨论】：

【解决方案2】：

我认为这样可以解决问题：

table{
    table-layout: fixed;
    width: 300px;
}

【讨论】：

@DivyaBhalodiya 1. 如果有重复，那就是问题，而不是答案。每次发布答案时，我都不必检查类似的问题。如果您愿意，请将问题标记为重复。 2.你怎么知道它被复制了，因为300px？ 200px 或 300px 会是非常流行的选择，因为它是一个超大尺寸的桌子，你不觉得吗？
快速、简单、实用。

【解决方案3】：

使用与表格相同的以下属性及其完全动态：

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid pink;
    vertical-align: middle;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz klxjgkldjklg </li>
  <li>baz</li>
  <li>baz lds.jklklds</li>
</ul>

可能是它解决你的问题。

【讨论】：

为什么建议使用带有表格 css 的列表而不是普通表格？也许表格数据（或类似数据）正是 OP 需要布局的？仅仅因为 css 和 divs 已经替换了页面布局的表格并不意味着表格是一个过时的元素。