Question

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

所有标题都应对齐中心 “第1列的值=左对齐”和 “第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>

Answer 1

您正在寻找：第一个孩子 - 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;
}

Answer 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>

Answer 3

如下所示：

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

Answer 4

使用：

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

但要确保拥有thead＆amp; 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>

Answer 5

除了：使用CSS的第一个孩子，你可以使用纯HTML：

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

OR

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

Answer 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

文本 - 仅对“第一列”的“值”对齐“左”

6 个答案: