Question

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

<col>标记仅适用于firefox

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

您可以包装＆lt; td＆gt;的内容在另一个宽度和溢出的标签中：隐藏。例如：

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

CSS：

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

Answer 2

您可以在td标记中使用width属性

<td width="100px">

或者您可以使用样式属性

<td style="width:100px">

或者你可以在css文件中定义它

.tdstyle{
    width:100px;
}

并在td标记中指定类

<td class="tdstyle">

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>

Answer 4

尝试使用

max-width:100px;

或

max-height:100px;

这会让您的列最大扩展到您设置的宽度。

如何获得固定的表列宽度

4 个答案: