Question

我的搜索结果'截图：

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

我的表格代码很简单：

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

Answer 1

将其添加到样式表

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

Answer 2

虽然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/

修复了HTML中表格列的宽度

2 个答案: