如何获得固定的表格列宽

Question

如何将单个表格列固定为特定宽度，以便无论该列中有多少文本，列的宽度都保持不变？

<col> 标签只适用于火狐

table-layout:fixed 真的是整张桌子

仅仅设置一个width 是不行的

最好的 CSS 属性是什么

下面是代码：

    .video{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
            .audio{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
            .image{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
             .qid2{
        overflow:hidden;
        table-layout:fixed;
        max-width:92px;
                }

  <table border=1 id="vidtbl">
    <tr>
    <th>Question No</th>
    <th>Video</th>
    <th>Audio</th>
    <th>Image</th>
    </tr>
    <tr>
    <td class="qid2"></td>
    <td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
    <td class="audio">hello</td>
    <td class="image"></td>
    </tr>
    </table>

Answer 1

尝试使用

max-width:100px;

或

max-height:100px;

这将使您的列最大扩展至您设置的宽度。

Answer 2

您可以将

的内容包装在另一个带有 width 和 overflow:hidden 的标签中。例如：

<table>
  <tr>
    <td class="fifty">
      <p>Lorem ipsum dolor</p>
    </td>
  </td>
</table>

还有 CSS：

.fifty p { overflow:hidden; width:50px; }

【讨论】：

• 请记住，表格应该专门用于表格数据，而不应该用于页面布局。谷歌“无表格布局”的一些示例，说明为什么表格不适合页面布局以及有哪些替代方案可用。

Answer 3

如果将 td 的宽度设置为固定值对您不起作用：

<td width="100">..</td> or <td style="width:100px">...</td>

将内容包装到一个 div 并将溢出设置为隐藏：

<td><div style="width:100px;overflow:hidden;">...</div></td>

Css 类将非常高效且易于维护：

.col120 { width:120px; overflow:hidden;}

<td><div class="col120">content...</div></td>