创建一个漂亮的圆角 table

Question

我正在尝试制作一个 html/css table 以供我们发布的各种职位空缺重复使用。

它目前看起来“不错”，但是托管它的网站在图像、对话框等方面确实有圆角。我怎样才能把我拥有的东西变成这样的设计？

来自这里：

到这个模型

右边的 space 是供人们粘贴的文本。锦上添花的是让这个有点响应，所以 white/grey 区域将在移动设备上包裹在绿色下面。

这是我目前拥有的：

.tg {
  margin: 0px auto;
  width: 1000px;
}

.tg td {
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-xz1g {
  background-color: #003e2f;
  border: thin solid #ffffff;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  border-bottom: medium solid #000000;
}

@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0px;
  }
}

<div class="tg-wrap">&nbsp;
  <table width="728" class="tg">
    <tbody>
      <tr>
        <td width="290" class="tg-xz1g">Job Title</td>
        <td width="426" class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Org</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Vacancy Location</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Brief outline of position</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Application Closing Date</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g" colspan="2" style="text-align: center;">POC for further details</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Email</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Phone</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Attachments</td>
        <td class="tg-0lax">Attachment #1<br />
          <br /> Attachment #2</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您只需将 border-radius 应用于 <td> 本身。但是，border-radius 只有在使用 border-collapse: seperate 而不是默认的 collapse 分隔边框时才有效。作为副作用，这还允许您通过使用间隙属性来 space TD：border-spacing

.tg {
  border-collapse: separate;
  border-spacing: 10px;
}

.tg td {
  border-radius: 7px;
  border: 1px solid red;
}

<div class="tg-wrap">&nbsp;
  <table width="728" class="tg">
    <tbody>
      <tr>
        <td width="290" class="tg-xz1g">Job Title</td>
        <td width="426" class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Org</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Vacancy Location</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Brief outline of position</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Application Closing Date</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g" colspan="2" style="text-align: center;">POC for further details</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Email</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Phone</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Attachments</td>
        <td class="tg-0lax">Attachment #1<br />
          <br /> Attachment #2</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

您需要添加 border-radius 以获得圆角并使用 border 或 background-color 属性查看其效果。

.tg {
  margin: 0px auto;
  width: 1000px;
}

.tg td {
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
  border: 1px solid black; /*Add this to your code*/
  border-radius: 5px; /*Add this to your code*/
  margin: 3px;/*According to need*/
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-xz1g {
  background-color: #003e2f;
  border: thin solid #ffffff;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  border-bottom: medium solid #000000;
}

@media screen and (max-width: 767px) {
  .tg {
    width: auto !important;
  }
  .tg col {
    width: auto !important;
  }
  .tg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0px;
  }
}

<div class="tg-wrap">&nbsp;
  <table width="728" class="tg">
    <tbody>
      <tr>
        <td width="290" class="tg-xz1g">Job Title</td>
        <td width="426" class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Org</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Vacancy Location</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Brief outline of position</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Application Closing Date</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g" colspan="2" style="text-align: center;">POC for further details</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Name</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Email</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Phone</td>
        <td class="tg-0lax">TEXT</td>
      </tr>
      <tr>
        <td class="tg-xz1g">Attachments</td>
        <td class="tg-0lax">Attachment #1<br />
          <br /> Attachment #2</td>
      </tr>
    </tbody>
  </table>
</div>

创建一个漂亮的圆角 table

Creating a nice rounded corner table

html

css

html-table

rounded-corners