文本对齐“左”仅用于第一列的“值”答案

【问题标题】：Text-Align "Left" only for the "values" of First Column文本对齐“左”仅用于第一列的“值”
【发布时间】：2015-07-01 18:20:16
【问题描述】：

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

所有标题都应该居中对齐 “第一列的值=左对齐”和 "第 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 - w3schools.com/cssref/sel_firstchild.asp
@nikhil 你能建议我应该在哪里使用它吗？
评论里很难解释。我已经添加了相同的答案。

标签： html css

【解决方案1】：

您正在寻找 :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;
}

【讨论】：

【解决方案2】：

尝试使用:first-child伪元素

<!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 > td:first-child{
  text-align: left;
}


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>

【讨论】：

【解决方案3】：

像下面这样：

th,td{
  text-align: center;
}
th:first-child, td:first-child{
  text-align: left;
}

【讨论】：

【解决方案4】：

使用：

tbody td
{
  text-align: center;
}
tbody tr td:first-child{text-align:left;}

但请确保有 thead & tbody 标签

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

tbody td
{
  text-align: center;
}
tbody tr td:first-child{text-align:left;}



</style>
</head>
<body>

<table width="100%">
  <col width="55%">
  <col width="15%">
<col width="15%">
<col width="15%">
<thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Money</th>
    <th>Cars</th>
  </tr>
</thead>
<tbody>
  <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>
</tbody>
</table>



</body>
</html>

【讨论】：

【解决方案5】：

除了带有 CSS 的 :first-child 之外，您还可以使用纯 html 来制作它：

<table>
  <col width="55%" align="left">
  <col width="15%" align="center">
  <col width="15%" align="center">
  <col width="15%" align="center">

或

<table>
  <col width="55%" style="text-align:left">

【讨论】：

【解决方案6】：

您好，您也可以尝试第 n 个子选择器

<!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 > td:nth-child(1){
      text-align: left;
     }

     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>

您更改 n 的值并更改该 td 的 css

【讨论】：