PHP / HTML-表格宽度

Question

我正在使用HTML和PHP创建网页。 在下面，我附上我的问题的照片。

我的第一个问题是我无法将所需的格式提供给表格：

• 我想调整到内容栏1、2、3和4。
• 第5列（最后一列）应该有更多的空间，更好。
• 最后一列的aaaaaaaaaaaaaaaa不应超出表的范围。 到达色谱柱末端时，应将其拆分或换行。

这是我的一段代码：

echo "<table><tr>";
echo '<td width="40">ID</th>';
echo '<td width="50">Organism</th>';
echo '<td width="50">Chromosome</th>';
echo '<td width="50">Gene name</th>';
echo '<td>Sequence</th>';
echo "</tr>";
while($row = mysqli_fetch_array($result2)) { 
    echo "<tr>";
    echo "<td>$row[id_send]</td>";
    echo "<td>$row[organism]</td>";
    echo "<td>$row[chromosome]</td>";
    echo "<td>$row[gene]<br></td>";
    echo "<td>$row[sequence]</td>";
    echo "</tr>";
}
echo "</table>";

Answer 1

您可以将此css用于表。

.wrapText
{
     table-layout:fixed;
     width: 100%;
     word-wrap: break-word;
}

但是，“ break-word”会打断单词并将它们包装到下一行，这可能会使文本不可读。

Answer 2

.table {
    margin-bottom: 30px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.tableHeading {
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    color: #000000;
    padding: 5px;
    background: url('/images/table-2-head-bg.gif');
    background-repeat: repeat-x;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableSubHeading {
    padding: 5px;
    color: #666666;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableMassActionCell {
    padding-top: 10px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableColumnHeader {
    font-weight: bold;
    font-size: 12px;
    background-color: #EEEEEE;
    padding: 5px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowNoResults {
    font-weight: bold;
    background-color: #ffccff;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowLeft1 {
    font-weight: bold;
    background-color: #f7f7f7;
    padding: 5px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowRight1 {
    padding: 5px;
    background-color: #f7f7f7;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowLeft2 {
    font-weight: bold;
    background-color: #ffffff;
    padding: 5px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableRowRight2 {
    padding: 5px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
.tableSubmitCell {
    background-color: #EEEEEE;
    padding: 5px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    text-align: right;
}