HTML中表列的固定宽度

我的搜索结果截图：

帮助我为每个内容获取类似的列或固定列。当歌曲名称的长度增加时，它会扩展

我的表格代码很简单：

<table id="dataTable" border="1" width="70%" cellspacing="0" cellpadding="5">
 <thead>
     <tr>
        <th><font color="green"><?php echo $MusicTitle;?></font></th>
        <th><font color="red"><?php echo $p['bit'];?></font></th>
        <th><a class="orange" href="<?php echo $p['url'];?>">Download</a></th>
     </tr>
 </thead>

---

将其添加到样式表中

table
{
    table-layout:fixed;
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     white-space: pre-wrap;       /* css-3 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
     word-break: break-all;
     white-space: normal;
}

---

虽然stackoverflow不是懒惰人梦想成真的地方。好吧，假设我这样做是作为一个例外：

• 首先，您的HTML表结构看起来很简单
  
  代表，但您的内容在语义上似乎是包含数据的表单元格，也称为

• 其次，您正在混合CSS和过时的表示标签以及属性，如

  cellpadding

  或

  font

  。你应该避免这样

以下是我对您的结构的清理方法：

HTML:

<table id="dataTable" cellspacing="0">
 <thead>
     <tr>
        <th>Music Title</th>
        <th>Bitrate/File Size</th>
        <th>Download Link</th>
     </tr>
 </thead>
 <tbody>
     <tr>
        <td><?php echo $MusicTitle;?></td>
        <td><?php echo $p['bit'];?></td>
        <td><a href="<?php echo $p['url'];?>">Download</a></td>
     </tr>
 </tbody>

音乐标题
比特率/文件大小
下载链接

CSS:

#数据表{/*单元格间距在``上仍然是必需的*/
宽度：70%；
边框：1px实心#000；
边界塌陷：塌陷；
-webkit连字符：自动；
-moz连字符：自动；
连字符：自动；
表布局：固定；
空白：预处理；
空白：-moz预包装；/*Firefox 1.0-2.0*/
空白：-o形预包装；/*Opera 7*/
空白：-预包装；/*Opera 4-6*/
空白：预换行；/*CSS 3*/
空白：pre\9；/*IE7+*/
换行：断开单词；/*IE 5.5-7*/
单词break:break all；/*Webkit*/
空白：正常；
}
#数据表th{
填充物：5px；
}
#数据表th:n子级（1）{
颜色：#0F0；
}
#数据表th:n子级（2）{
颜色：#F00；
}
#数据表td{
边框：1px实心#000；
填充物：5px；
字体大小：粗体；
文本对齐：居中；
}
#数据表td：第一个孩子{
文本对齐：左对齐；
}

---

另请参见

您要么需要指定宽度并对其满意（例如，用省略号trunc您的文本），要么使用图像字符串测量函数并将大小传递给输出，这有点像kaput，因为它取决于字体渲染，而您的客户端可能没有相同的字体？堆栈回答：请避免

。改为使用CSS选择器（

#数据表thead:nth child（1）{color:green；}

或CSS类，如果不能包含，则使用内联样式a la

#dataTable { /* cellspacing is still necessary on `<table>` */
    width: 70%;
    border: 1px solid #000;
    border-collapse: collapse;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto; 
    table-layout: fixed;
    white-space: pre;
    white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
    white-space:   -o-pre-wrap; /* Opera 7 */
    white-space:     -pre-wrap; /* Opera 4-6 */
    white-space:      pre-wrap; /* CSS 3 */
    white-space: pre\9; /* IE7+ */
    word-wrap: break-word; /* IE 5.5-7 */
    word-break: break-all; /* Webkit */
    white-space: normal;
}

#dataTable th {
    padding: 5px;
}

#dataTable th:nth-child(1) {
    color: #0F0;
}
#dataTable th:nth-child(2) {
    color: #F00;
}

#dataTable td {
    border: 1px solid #000;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
#dataTable td:first-child {
    text-align: left;
}