Question

所以我在表格行/单元格中得到了这种徽章（内容在这里），但它会影响整个表格行的高度，我想以某种方式阻止...所以基本上我想要“这里的内容“以适合单元格的徽章，并以某种方式从整行中取出一些填充，因此所有行都是相同的高度。任何想法如何实现这一点？

.table-head {
  background: lightblue;
}

.table-body {
  background: lightgreen;
}

td {
  padding: 8px 0;
}

.content-here {
  text-transform: uppercase;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  text-align: center;
  font-family: sans-serif;
  background: purple;
  display: table-cell;
  font-size: 14px;
  padding: 5px 20px;
}

@media only screen and (max-width: 500px) {
  .live {
    padding: 15px 12px;
  }
}

<table class="simple-table">
  <thead class="table-head">
    <tr class="table-row">
      <td>Day</td>
      <td>Date</td>
      <td>Time</td>
      <td>No</td>
      <td>Lorem ipsum</td>
      <td>Ipsum lorem</td>
      <td>Lorem</td>
    </tr>
  </thead>

  <tbody class="table-body">
    <tr class="table-row">
      <td><span class="content-here">content here</span></td>
      <td>Lorem ipsum</td>
      <td>Ipsum lorem</td>
      <td>Lorem</td>
    </tr>

    <tr class="table-row">
      <td>Day</td>
      <td>Date</td>
      <td>Time</td>
      <td>No</td>
      <td>Lorem ipsum</td>
      <td>Ipsum lorem</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>

这是一支笔：https://codepen.io/anon/pen/Oxbgzw

Answer 1

如果我理解你的话。你的td上有一个填充，你的跨度使它看起来像那样

当你有班级时，你可以这样做：

.table-head td {
padding: 8px 0;
}
.table-row:nth-child(2) td {
padding: 8px 0;
}
.content-here {
text-transform: uppercase;
border-radius: 5px;
color: white;
font-weight: 600;
text-align: center;
font-family: sans-serif;
background: purple;

font-size: 14px;
padding: 8px 20px;
display:block;

}

看到问题是你告诉它在span和td上都有填充意味着如果你在span中有5px +在td上有8px那么在你的表的中间行你总共得到13px你的字体大小，所以它会比其他行更大

Answer 2

目前Css不为父元素提供任何选择器。将类内容添加到td元素中。喜欢这个

<tbody class="table-body">
<tr class="table-row">
  <td class="content-here" ><span>content here</span></td>
  <td>Lorem ipsum</td>
  <td>Ipsum lorem</td>
  <td>Lorem</td>
</tr>

这是一个链接 https://codepen.io/anon/pen/jGVLLq

防止单元格内的内容影响表格行的高度

2 个答案: