创建一个漂亮的圆角桌

Question

我正在尝试制作一个 html/css 表，以便在我们宣传的各种职位空缺中重复使用。

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

从这里：

到这个模型

正确的空间是人们要粘贴的文本。 锦上添花是让这个有点响应，所以白色/灰色区域将包裹在移动设备上的绿色下方。

这是我目前拥有的：

.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 以具有圆角并使用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>

Answer 2

您只需将border-radius 应用于<td> 本身。但是，border-radius 仅在您使用border-collapse: seperate 而不是默认的collapse 分隔边框时才有效。作为副作用，这还允许您使用 gap 属性来分隔 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>