代码之家 › 专栏 › 技术社区 › user8236024

CSS边框溢出到div外部

border html-table css html

user8236024 · 技术社区 · 7 年前

如果我在距离head的天数中加1,边界将溢出div之外,因此如果剩下113天,边界将溢出,或者如果是另一个月,边界将溢出div之外。我想要的是边界始终保持“静态”。

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

1 回复 | 直到 7 年前

Suresh Ponnukalai 7 年前

从样式中删除填充 padding: 0px 107px; 和 padding-right: 26%; . 您可以使用 text-align:center 并使其成为td的中心。也适用于 width:100% 为您的表,并为每个表平分 td . 这是可选的。如果你想要的话 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>