让 <td> 留在里面 window

Question

所以我用一些内容做了一个table，但是当我的一个字符串很长时，它就超出了我的window。这怎么能改变？通过定义一个 max-width: 80%; 认为它不能超过这个。也试过给td, th=width: 240px;。但它仍然发生？

然后我尝试实现类似这样的东西 word-wrap: break-word; 但这没什么区别。

.tableTheme {
    background: #0d5dd4;
    color: white;
}

.tableWidth {
    max-width: 80%;
}

.tableWidth td,
th {
    width: 240px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
    <div class="tableWidth">
        <table class="table table-bordered">
            <thead class="tableTheme">
                <tr>
                    <th scope="col">Test Suite Collection ID</th>
                    <th scope="col">Test Suite Collection Name</th>
                    <th scope="col">Test Suite ID</th>
                    <th scope="col">Test Suite Name</th>
                    <th scope="col">Test Case ID</th>
                    <th scope="col">Test Case Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>TSC</td>
                    <td>2</td>
                    <td>TS</td>
                    <td>3</td>
                    <td>TC</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE</td>
                    <td>2</td>
                    <td>TS</td>
                    <td>3</td>
                    <td>TC</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

通常长字符串在单词之间包含空格，因此它们会断开。但如果不是，word-break: break-all; 会做你显然想要的事情：

.tableTheme {
    background: #0d5dd4;
    color: white;
}

.tableWidth {
    max-width: 80%;
}

.tableWidth td,
th {
    width: 240px;
}
td {
  word-break: break-all;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
    <div class="tableWidth">
        <table class="table table-bordered">
            <thead class="tableTheme">
                <tr>
                    <th scope="col">Test Suite Collection ID</th>
                    <th scope="col">Test Suite Collection Name</th>
                    <th scope="col">Test Suite ID</th>
                    <th scope="col">Test Suite Name</th>
                    <th scope="col">Test Case ID</th>
                    <th scope="col">Test Case Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>TSC</td>
                    <td>2</td>
                    <td>TS</td>
                    <td>3</td>
                    <td>TC</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE</td>
                    <td>2</td>
                    <td>TS</td>
                    <td>3</td>
                    <td>TC</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 2

只需添加

td {
  word-break: break-all;
}

它会起作用

.tableTheme {
  background: #0d5dd4;
  color: white;
}

.tableWidth {
  max-width: 80%;
}

.tableWidth td,
th {
  width: 240px;
}
td {
  word-break: break-all;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
  <div class="tableWidth">
    <table class="table table-bordered">
      <thead class="tableTheme">
        <tr>
          <th scope="col">Test Suite Collection ID</th>
          <th scope="col">Test Suite Collection Name</th>
          <th scope="col">Test Suite ID</th>
          <th scope="col">Test Suite Name</th>
          <th scope="col">Test Case ID</th>
          <th scope="col">Test Case Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>TSC</td>
          <td>2</td>
          <td>TS</td>
          <td>3</td>
          <td>TC</td>
        </tr>
        <tr>
          <td>1</td>
          <td>
            WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE_WHEN_I_HAVE_A_VERY_LONG_STRING_IT_DOESN'T_FIT_ONE_WINDW_ANYMORE
          </td>
          <td>2</td>
          <td>TS</td>
          <td>3</td>
          <td>TC</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

让 <td> 留在里面 window

Make <td> stay inside window

html

css

html-table

twitter-bootstrap