Question

我正在尝试创建一个带有圆角和表头行背景颜色不同的表。借助在线资源，我成功地制作了这两个文件（在html / css中是超级初学者），但是同时使用这两个文件时我失败了。

我的意思是（您可以在下面的小提琴中看到它），我可以将圆角变好，并具有我想要的桌子设计，除了标题背景颜色仍然是一个完美的矩形，因此在圆角外溢出。

我尝试在不同的地方添加border-radius属性，但是没有一个能达到我的预期效果。如何使拐角变圆并使thead背景色很好地嵌入其中？

table.std {
  margin-top: 0.2cm;
  width: 100%;
  border: 0.03cm solid #8a8a8a;
  border-spacing: 0;
  border-radius: 15px 15px 0px 0px;
  font-size: 10pt;
}

table.std thead {
  text-align: left;
  background-color: lightgray;
  height: 25px;
}

table.std thead tr th:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  border-bottom: 0.03cm solid #8a8a8a;
}

table.std tbody tr td:first-child {
  padding-left: 0.25cm;
  /* To align with section title */
  width: 30%;
}

table.std tbody tr td {
  border-bottom: 0.01cm dashed lightgray;
  height: 20px;
}

<div>
  <table class="std">
    <thead>
      <tr>
        <th colspan=2>Test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ID</td>
        <td>id1</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>2019/12/19</td>
      </tr>
      <tr>
        <td>foo</td>
        <td>bar</td>
      </tr>
      <tr>
        <td>lorem</td>
        <td>ipsum</td>
      </tr>
      <tr>
        <td>john</td>
        <td>doe</td>
      </tr>
    </tbody>
  </table>
</div>

https://jsfiddle.net/co7xb42n/

感谢您的帮助

Answer 1

将边界半径添加到th

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

https://jsfiddle.net/53eshg64/

Answer 2

从.center-image标记中添加*, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 15px; } ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style: outside none; padding: 0; margin: 0 -15px; } ul:not(:last-child){ margin-bottom: 20px; } ul li { display: flex; padding: 15px; } /* Images parent global CSS */ ul li .box { display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; border: 2px solid #888888; overflow: hidden; border-radius: 5px; position: relative; } /* Global image CSS */ .box img { flex-grow: 0; height: 100%; width: 100%; object-fit: cover; } /* Specific image or center image CSS */ .box img.center-image{ display: block; height: auto; max-width: 100%; width: auto; }。

border-radius

th

Answer 3

这是因为th标签位于table标签上方，并且没有任何边框半径

将边界半径添加到th

带有背景颜色

3 个答案: