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

Answer 2

您的用户名太长，且不包含任何空格，因此不会包装。

for td给word-break：break-all

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

Answer 3

在td中使用div是一个非常糟糕的主意。

使用div instide td并不比使用表格进行布局的任何其他方式更差。（有些人从不使用表格进行布局，而我恰好是其中之一。）

如果在td中使用div，则会遇到可能难以预测元素大小的情况。 div的默认值是从其父级确定其宽度，表格单元格的默认值是根据其内容的大小确定其大小。

有关如何调整div的规则在标准中有明确定义，但是如何定义td的规则并没有明确定义，因此不同的浏览器使用略有不同的算法。

如果您需要任何进一步的帮助，请告诉我

Answer 4

＆＃13;

   

.headcol {
    position: relative;
    width: 18em;
    border-right: 2px solid #fff;
    background-color: #fff;
    z-index: 0;
}
.innerHead {
    word-break: break-all;
    overflow: hidden;
}

＆＃13;

<table>
<tbody><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>
</tbody></table>

＆＃13;

在HTML中对齐表格行

4 个答案: