Html 向具有相同属性的所有元素添加公共CSS

我有一个表格部分如下。我希望在我有“col”属性的地方，左边应该加上20px的边距。我需要的只是语法方面的帮助

我已经编辑了这个问题，并在这里包含了我的完整代码。请注意，在移动视图中，每一行都堆叠在另一行的顶部

<div class="tableComponent">   
<table class="table table-striped" id="table">
  <thead>
    <tr>
      
      <th scope="col">Name</th>
      <th scope="col">Designation</th>
      <th scope="col">Contact Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      
      <td col="Name">Mark</td>
      <td col="Designation">Otto</td>
      <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
    <tr>
      
        <td col="Name">Mark</td>
        <td col="Designation">Otto</td>
        <td col="Contact Details">@mdo</td>
    </tr>
  </tbody>
</table>
</div>

---

我不知道怎么写这个。有什么建议吗？

您可以这样做来选择具有col属性的所有单元格：

td[col]{
  padding-right: 20px;
}

如果要选择col等于“Name”的单元格，可以执行以下操作：

td[col="Name"]{
  padding-right: 20px;
}

---

您可以找到更多信息。

如果您想使用

col

属性选择

td

，您可以这样做：

td[col]{ }

但是请注意，

marginright

对td不起作用-您必须使用填充

处理表格时，不能以与其他元素相同的方式应用相同的间距，例如：

• 不能向表格单元格添加边距
• 不能在单元格之间添加不同大小的边框

使用填充的工作代码段：

td[col]{
右边填充：20px；
}

做记号
奥托
@mdo
做记号
奥托
@mdo

记住，在使用：：after时，您需要规则：

内容：“”边框折叠：分隔

是。我已经知道了。请检查问题中更新的代码。如果您想在左侧留空白，则必须使用

左填充

而不是

右填充

您好。我尝试了此操作，但没有反映在代码中。我已经编辑了问题并包含了实际代码。请告诉我我错过了什么？@HarshVardhanBandta你的新问题是一个完全不同的问题！它使用灵活的布局和填充，而不是td和边距。如果您有不同的问题，您应该将其添加为新帖子。关于堆栈溢出的每个问题都应该是关于一个特定的问题（而不是中途改变问题：）是的。但我仍然需要访问该属性。我只需要语法。您能帮忙吗？@HarshVardhanBandta我已经向您展示了如何访问该属性，您可以在代码段中看到它正在工作。请参阅我对您的问题的评论-您想要什么还不清楚，因此在我们确切知道您想要什么之前，我们无法提供帮助。我只需要标题和数据之间的空格，即名称和名称值之间的空格等等。

td[col]{ }