Html 在表的td中使用分词后，水平滚动不工作

我只想创建一个引导表，具有不同的td宽度，我的列更多，所以我想要一个水平滚动条，但在任何td中使用单词break之后，滚动条停止工作

下面是我的例子

CSS

.检查{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}

HTML

名字
姓
要点
要点
要点
要点
要点
要点
要点
要点
要点
要点
厕所
史密斯
50
50
50
50
50
12000050000600000070000080000
50
50
50
50

这是因为您没有需要显示滚动条的其他td。如果表格的宽度超过屏幕的宽度，将出现一个滚动条。唯一的td要求你有一个滚动条，而你已经指示打破这个词。许多td还具有“最大宽度”属性。这意味着您的td将占用高达100px的空间，但也可以更少。因此，这些td也不会强制出现滚动条。您设置的数据符合屏幕宽度的限制

            <tr>
              <td style=" max-width:100px">
              john
              </td>
              <td
              style="
              max-width: 10px;
              word-reak: breakAall
              "
              >
            Smith
            </td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>12000050000600000070000080000</td>
            <td style="max-width:200px;word-break:break-all">
            12000050000600000070000080000</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
        </tr>

例如，此代码将显示一个滚动条，因为没有分词样式的td不存在，并且它强制整个tr宽度推过屏幕宽度

            <tr>
              <td style=" max-width:100px">
              john
              </td>
              <td
              style="
              max-width: 10px;
              word-reak: breakAall
              "
              >
            Smith
            </td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>12000050000600000070000080000</td>
            <td style="max-width:200px;word-break:break-all">
            12000050000600000070000080000</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
        </tr>

厕所
史密斯
50
50
50
50
12000050000600000070000080000
12000050000600000070000080000
50
50
50
50

---

请参见此处的示例：

那么解决方案是什么。我的td值类似于“aer124rtbjkk5555yy666666”，我只想在两行中设置它。

            <tr>
              <td style=" max-width:100px">
              john
              </td>
              <td
              style="
              max-width: 10px;
              word-reak: breakAall
              "
              >
            Smith
            </td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>12000050000600000070000080000</td>
            <td style="max-width:200px;word-break:break-all">
            12000050000600000070000080000</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
            <td style=" max-width:100px">50</td>
        </tr>