html - 在 HTML 中对齐表格行

Question

我的问题是我找不到固定表格行高的方法，如果用户名超过它重叠到另一列。检查最后两行

它也可以在侧面滚动，用户名仍然在他们的位置。

单行代码:

<tr>
    <td class="headcol">
        <div class="innerHead">
    <div class="user-id" style="display:none;">18993</div>
    <input type="checkbox" class="checkboxes" name="user_select[]">
    <a href="/accounts/edit_profile/TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting@gmail.com/18993">TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting@gmail.com</a>      </div>
    </td>
    <td class="forcedWidthUserCode">Tested091237871</td>
    <td class="textAlignCenter">Field staff</td>
    <td class="forcedWidth">Testing</td>
    <td class="forcedWidth">Tested</td>

            <td> N/A </td>

    <td class="textAlignCenter">Active</td>
    <td> N/A </td>
    <td class="forcedWidth"> N/A </td>
    <td> N/A </td>
    <!--<td>N/A</td>-->
</tr>

CSS:

.headcol {
    position: absolute;
    width: 18em;
    border-right: 2px solid #fff;
    background-color: #fff;
    z-index: 0;
}

table tr td {
    /* background: #fff; */
    padding: 6px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
}

如何根据用户名列的宽度对齐和换行文本？

Answer 1

发生这种情况是因为这些节点(复选框和文本节点)之间存在空白。在空白处换行。

有两种处理方法。

如@Supraja Ganji 所述:使用word-break。

table tr td {
    word-break: break-all;
}

或防止整行中断，并隐藏任何溢出的内容:

table tr td {
    white-space: nowrap;
    overflow: hidden;
}