CSS table 边框样式

Question

我有一个 table，我希望 row/table 的头部是红色的，但有一个稍微圆角比直边更光滑，但我还需要 space 标题或半径之间的宽度将毫无意义。我能想到的唯一选择是为分隔线创建一个空的 th。但更喜欢 CSS 修复。

代码

.restaurant {
width: 80%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant tr {
width: 100%;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-spacing: 5px;
z-index: -1;
}
.restaurant td {
height: 100%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant th {
line-height: 15px;
background-color: #DE0000;
color: #FFFFFF;
border: 5px solid #FFFFFF
border-spacing: 10px;
border-radius: 4px;
}

html

<table class="restaurant">
  <tr>
    <td colspan="2">

        <table class="restaurant-corners">
          <tr>
            <td width="10%">
              <img src="/css/images/menu-corner-top-left.png" class="corners">
            </td>
            <td width="80%">
            </td>
            <td width="10%">
              <img src="/css/images/menu-corner-top-right.png" class="corners" align="right">
            </td>
          </tr>
        </table>

       </td>
     </tr>
     <tr>
       <td colspan="2">

        <table class="restaurant-logo" cellspacing="0">
          <tr>
            <td colspan="3">
              <center><img src="/css/uncletoms.png"></center>
            </td>
          </tr>
          <tr>
            <th width="80%">
              <h2>Breakfast</h2>
            </th>
            <th width="20%">
              <h2>Drinks</h2>
            </th>
          </tr>
        </table>

可能需要更多信息。但我想确保我没有遗漏任何东西。

Answer 1

设计带圆角的 table 时，请勿使用 border-collapse: collapse。 OP 要求行为红色的要求含糊不清......红色边框？文本？背景？...需要具体说明。我们将 border-radius 应用到 table 的边框以及第一个和最后一个 <th> 边框。请参阅 Snippet:

中的评论

section {
  padding: 20px 10px;
  width: 100%;
  height: auto;
  border-bottom: 3px ridge #FF6;
  margin: 0 5px 20px;
}
table.x {
  position: relative;
  padding: 0;
  box-shadow: 0 1px 9px 1px #ccc;
  /* This will round the outside border on all 4 corners */
  /* If you want only the head to have rounded corners uncomment *1* ruleset and remove or comment *2*/
  /* border-top-left-radius: 6px; 
     border-top-right-radius: 6px;
  */
  border-radius: 6px;
  margin: 20px auto;
  table-layout: fixed;
  width: 50%;
  height: 100%;
  max-height: 550px;
}
.x th {
  color: #FFF;
  background: #2C7EDB;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.x tr:nth-child(odd) {
  background-color: #333;
  color: #FFF;
}
.x tr:nth-child(even) {
  background-color: #D3E9FF;
  color: #333;
}
.x td {
  border-style: solid;
  border-width: 1px;
  border-color: #264D73;
  padding: 5px;
  text-align: left;
  vertical-align: top;
  position: relative;
}
/* Next 2 rulesets are used to create rounded corners to the inner borders of the head */

/* Remove or comment the last 2 rulesets if you don't want the bottom corners rounded */

.x thead th:first-child {
  border-top-left-radius: 6px;
}
.x thead th:last-child {
  border-top-right-radius: 6px;
}
.x tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

<section>
  <table class="x">
    <caption>table.x</caption>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</section>

CSS table 边框样式

CSS table border styling

css

html-table

styling