如何实现HTML/CSS招聘表格的圆角效果与响应式适配

核心改动说明 #

1. 圆角效果实现 #

因为默认表格的边框合并模式会导致圆角无法正常显示，所以做以下调整：

• 取消表格硬编码固定宽度，改为最大宽度限制，适配不同尺寸的桌面端屏幕
• 表格设置border-collapse: separate和border-spacing: 0，同时添加border-radius和overflow: hidden，裁切掉超出圆角范围的内容
• 移除单元格原有的黑色边框，改为浅灰色底部分隔线，贴合设计稿视觉效果

2. 响应式适配实现 #

移动端（767px宽度以下）取消表格默认布局，改为块级排布：

• 所有单元格转为块级元素，宽度占满全屏
• 绿色标签区域在上，内容区域在下自动换行，无需横向滚动
• 调整单元格内边距，适配移动端触控阅读习惯

完整修改后代码 #

CSS代码 #

.tg {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px; /* 可根据站点统一圆角数值调整 */
  overflow: hidden;
}

.tg td {
  font-size: 14px;
  padding: 12px 15px;
  word-break: break-word;
  border-bottom: 1px solid #eee;
}

.tg .tg-xz1g {
  background-color: #003e2f;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  width: 290px;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  background-color: #fff;
}

/* 跨列POC标题样式 */
.tg .tg-xz1g[colspan="2"] {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .tg td {
    display: block;
    width: 100% !important;
  }
  .tg .tg-xz1g {
    width: 100%;
    border-bottom: none;
  }
  .tg .tg-0lax {
    padding-top: 8px;
    padding-bottom: 16px;
  }
}

HTML代码 #

<div class="tg-wrap">
  <table class="tg">
    <tbody>
      <tr>
        <td class="tg-xz1g">Job Title</td>
        <td 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">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>

内容的提问来源于stack exchange，提问作者Darkstar.Industries