html - Text-Align "Left"仅针对第一列的 "values"

标签 html css

我正在尝试归档以下内容,

所有的标题都应该居中对齐 “第一列的值=左对齐”和 “第 2、3 和 4 列的所有值 = 居中对齐”

当我的表中有自动递增的值时,如何归档它

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

body > table > tbody > tr > td{
  text-align: center;
}


body > table > tbody > tr > th
{
  text-align: center;
}



</style>
</head>
<body>

<table>
  <col width="55%">
  <col width="15%">
<col width="15%">
<col width="15%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Money</th>
    <th>Cars</th>
  </tr>
  <tr>
    <td>John Franky</td>
    <td>$100</td>
    <td>$100</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Peter Thomson</td>
    <td>$80</td>
    <td>$100</td>
    <td>$100</td>
  </tr>
</table>



</body>
</html>

最佳答案

您正在寻找 :first-child - http://w3schools.com/cssref/sel_firstchild.asp

body > table > tbody > tr > td{
  text-align: center;
}


body > table > tbody > tr > td:first-child {
  text-align: left;
}

关于html - Text-Align "Left"仅针对第一列的 "values",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31158324/

相关文章:

c# - MVC 中的系统 Web HttpException(Renderbody)

javascript - 隐藏了错误的盒子

用于类似 Google 文档的文本评论的 CSS

html - 对齐不同长度的表单输入元素

javascript - 更改动画javascript后的文本内容

javascript - 如果另一个元素不存在或不可见,如何隐藏一个元素?

html - 每个浏览器都有不同的 CSS?

css - 在横向/纵向中保持一致的字体大小

css - 如何控制对象的位置

javascript - 在 elevateZoom 中禁用 Hover for Mobile 设备的缩放效果