Question

如果我添加1，直到边界将溢出div之外的日子，所以如果它还剩下113天它会溢出，或者如果它可能是不同月份边界将＆＃34;溢出＆＃34;在div之外。我想要的是边境停留＆＃34;静态＆＃34;整个时间。

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的中心。同时为您的表格应用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外

1 个答案: