HTML中表格列的固定宽度答案

【问题标题】：Fixed width of table column in HTMLHTML中表格列的固定宽度
【发布时间】：2014-02-10 03:53:52
【问题描述】：

我的搜索结果截图：

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

我的表格代码很简单：

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

【问题讨论】：

您要么需要指定宽度并对它们感到满意（例如，用省略号截断文本），要么使用图像字符串测量函数并将大小传递给输出，这有点像kaput 因为它取决于字体渲染，而您的客户端可能没有相同的字体？堆栈答案：stackoverflow.com/questions/1641756/…
请避免<font>。改用 CSS 选择器（#datatable thead th:nth-child(1) { color: green; } 或 CSS 类，或者如果不能包含任何一种，请使用内联样式 à la <th style="color:green;">

标签： html html-table

【解决方案1】：

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

首先，您的 HTML 表格结构似乎是 semantically wrong。
<th> 代表HTML Table Header Cell Element，但您的内容在语义上似乎是包含数据的表格单元格，也称为<td>。
其次，您正在混合 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：

#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;
}

另见http://jsfiddle.net/Volker_E/QL4cX/1/

【讨论】：

【解决方案2】：

将此添加到您的样式表中

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

【讨论】：