Html 表格单元格填充，我只能访问 td 单元格内部的元素

Question

我是数据表 JS，因此对表输出的控制有限，但我已设法在

<td>

内部添加元素

.dataTable {
  border: 1px solid blue;
 }

.dataTable td:has(.error-cell) {
  border-radius: 4px;
  border: #FAC7BE;
  background: #FFF0EE;
  color: #B23015;
  fill: #B23015;
}

<table class="dataTable">
  <tbody>
    <tr>
      <td>
        non error cell
      </td>
      <td>
        <span class="error-cell">
            This cell has the error
        </span>
      </td>
      <td>
        non error cell
      </td>
      <td>
        non error cell
      </td>
    </tr>
  </tbody>
</table>

此输出的内容如下：

但是我需要从设计中填充 td 内部，使其看起来像这样：

附上我当前尝试和期望结果的图片

Answer 1

从你的第二张图片看来，所有单元格都有一些填充，并且

.error-cell

是单元格内的一个元素。在这种情况下，您应该设置

.error-cell

本身的样式，而不是其父级

td

。

类似：

.dataTable {
  border:1px solid grey;
  border-collapse:collapse;
  width:100%
}
.dataTable td {
  border:1px solid grey;
  padding:1rem;
}
.dataTable td .error-cell {
  display:block;
  border-radius: 4px;
  background: #FFF0EE;
  color: #B23015;
  padding:0.5rem;
}

<table class="dataTable">
  <tbody>
    <tr>
    <td>
    1
    </td>
      <td>
        <span class="error-cell">
          <a class="info-tooltip" data-html="true" title="This field is required.">
            <my-icon name="interface-warning">!</my-icon>
          </a>
        </span>
      </td>      
    <td>
    3
    </td>
    </tr>
  </tbody>
</table>