如何获得固定的表格列宽

Posted 2023-03-06

【中文标题】如何获得固定的表格列宽

【英文标题】：How to get fixed table columns width

【发布时间】：2012-01-02 16:44:28

【问题描述】：

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

<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>

【问题讨论】：

你试过在td标签中设置宽度吗？

【参考方案1】：

尝试使用

max-width:100px;

或

max-height:100px;

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

【讨论】：

这不起作用，但感谢您的回答，因为我从来不知道最大宽度 b4。我将其包含在 css 中并将其放在我的问题中，以便您更好地了解我的 css 用于表格列

在你的 TD 中放一个 DIV 并让 TD 的宽度固定到某个百分比.. 然后尝试使用这种样式到 TD .. ` max-height: 60px;溢出：隐藏； `

让它工作了，需要包括最小宽度，因为你告诉我最大宽度我没有听说过这也让我知道最小宽度，你应该得到最好的回答，谢谢:)

@Malcolm，补充说明：IE6 和 IE7 不支持最大高度和宽度。

@all，请提及拒绝投票的原因。让每个人都知道。

【参考方案2】：

您可以将

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

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

还有 CSS：

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

【讨论】：

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

【参考方案3】：

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

<td >..</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>

【讨论】：

是的还是不行，表格也需要设置宽度

发生的事情是，如果我填写文本，那么列会上升到最大宽度，当没有文本时，列会缩小，我想我知道我需要做什么，给我 2 分钟，我可能需要设置最小宽度

你能发布生成的 html 吗？

你必须用 包装内容并将类应用到 div 而不是 td 上

.videowidth:120px;overflow:hidden;

images/dolphinvideo.png///////////// //////////////////////div>

【参考方案4】：

可以在 td 标签中使用 width 属性

<td >

或者你可以使用样式属性

<td style="width:100px">

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

.tdstyle
    width:100px;

并在 td 标签中指定类

<td class="tdstyle">

【讨论】：

不不不，我知道如何使用css，我的问题是，如果我只是设置一个宽度属性，如果我在一个120px列的表格中有一大段文字，而其他列是 120 像素，那么带有文本的列会变宽，而其他列会缩小。我不希望这样，我希望所有列都是 120 像素，不多也不少

不，但高度可以变化，它的宽度与弹出窗口中显示的表格一样为 550 像素 x 550 像素

设置宽度属性它

标签对我来说工作正常。它不与另一列重叠。相反，柱的高度增加了。我不确定为什么它不适合你。您使用的是哪个浏览器。 ? “550 像素乘 550 像素”是什么意思。这两个值是什么？