CSS 边界外溢 div

Question

如果我将 1 加到 head 之前的天数，边界将溢出到 div 之外，因此如果还剩 113 天，它将溢出，或者如果它可能是不同的月份，边界将 "overflow"外div。我想要的是边框一直保持 "static"。

html

  <div class="content">
    <div class="show-info">
      <table>
        <thead>
          <tr>
            <th>Show Name</th>
            <th>Season | Episode</th>
            <th>Days Until Release</th>
          </tr>
        </thead>
        <tbody>
          {{#each show}}
          <tr>
            <td>Test</td>
            <td>1 Mar. 2018 </td>
            <td>14 days left f(1 Mar. 2018)</td>
            <!-- <td>{{this.showData.show_name}}</td>
            <!-- <td>{{this.showData.seasons.[5].[13].airdate}}</td> -->
            <!-- <td>{{daysUntilShow this.showData.seasons.[5].[13].airdate}} days left f({{this.showData.seasons.[5].[13].airdate}})</td> --> -->
          </tr>
          {{/each}}
        </tbody>

      </table>

CSS（如果有更好的办法请告诉我）

#title {
  font-size: 25px;
  color: #05c46b;
  text-decoration: none;
  float: left;
  text-shadow: 3px 3px 3px black;
  margin: 30px 0px 0px 20px;
}

#title:hover {
  color: rgb(5,196,107);
}

.button {
  float: right;
}

.content {
  margin-top: 20px;
  color: white;
  background: linear-gradient(#1e272e, #485460);
}


.show-info th, td {
  white-space: nowrap;
  border-bottom: 1px solid white;
  overflow: visible;
  color: white;
  padding: 0px 107px;
  max-width: 158px;
  min-width: 104px;
  padding-right: 26%;
  padding-bottom: 5px;
  border-right: 1px solid white;
  /* margin: 0 auto; */

}

.show-info th:last-child, td:last-child {
  border-right: none;
}

.airing {
  background-color:#44bd32;
}

Answer 1

从您的样式 padding: 0px 107px; 和 padding-right: 26%; 中删除填充。取而代之的是，您可以使用 text-align:center 并使其成为 td 的中心。也为你的 table 应用 width:100%，并为每个 td 平均分配。这是可选的。如果你想要一些 td 需要大而一些 td 需要小，你可以根据你的 td 的百分比来决定和申请。这样它会相应地计算任何屏幕。我已经修改并添加了以下样式。

 .show-info table {
    width:100%;
 }
 .show-info th, td {
    white-space: nowrap;
    border-bottom: 1px solid white;
    overflow: visible;
    color: white;
    width:33%;
   /*padding: 0px 107px;
   max-width: 158px;*/
   min-width: 104px;
   /*padding-right: 26%;*/
   padding-bottom: 5px;
   text-align:center;
   border-right: 1px solid white;
  /* margin: 0 auto; */
}

我在以下代码段中添加了与上面相同的内容。

#title {
  font-size: 25px;
  color: #05c46b;
  text-decoration: none;
  float: left;
  text-shadow: 3px 3px 3px black;
  margin: 30px 0px 0px 20px;
}

#title:hover {
  color: rgb(5,196,107);
}

.button {
  float: right;
}

.content {
  margin-top: 20px;
  color: white;
  background: linear-gradient(#1e272e, #485460);
}

.show-info table {
  width:100%;
}
.show-info th, td {
  white-space: nowrap;
  border-bottom: 1px solid white;
  overflow: visible;
  color: white;
  width:33%;
  /*padding: 0px 107px;*/
  /*max-width: 158px;*/
  min-width: 104px;
  /*padding-right: 26%;*/
  padding-bottom: 5px;
  text-align:center;
  border-right: 1px solid white;
  /* margin: 0 auto; */

}

.show-info th:last-child, td:last-child {
  border-right: none;
}

.airing {
  background-color:#44bd32;
}

<div class="content">
    <div class="show-info">
      <table>
        <thead>
          <tr>
            <th>Show Name</th>
            <th>Season | Episode</th>
            <th>Days Until Release</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <td>Test</td>
            <td>1 Mar. 2018 </td>
            <td>14 days left f(1 Mar. 2018)</td>            
          </tr>
          
        </tbody>

      </table>

CSS 边界外溢 div

CSS border overflowing outside div

html

css

html-table

border