CSS樣式-無法在表格中居中文本

.transfers table{
  width: 650px;
  margin: 450px auto;
  border-collapse: collapse;
}

.transfers tr{
  border-bottom: 1px solid #cbcbcb;
}

.transfers th{
  font-family: "Montserrat", sans-serif;
}

.transfers th, td{
  border: none;
  height: 30px;
  padding: 3px;
  font-size: 20px;
}

.transfers .id{
  text-align: left;
}

.transfers .date{
  text-align: center;
}

.transfers .amount{
  text-align: right;
}

<div class="transfers">
        <table>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>
                        <tr>
                        <td style='background-color: blue'>211</td>;
                        <td class='date' style='background-color: blue'>2022-03-29</td>;
                        <td class='amount' style='background-color: blue'>IN: ￡4.00</td>;
                        </tr>;
            </tbody>
        </table>
    </div>
</body>

我目前正在嘗試使 ID 在左側，日期在中間，金額在右側：

但是，從下圖中使用上面的 CSS 代碼可以看出，“日期”和“金額”之間的間距很大。日期顯然不在中心。

uj5u.com熱心網友回復：

為所有列設定相同的寬度。

.transfers table {
  width: 650px;
  margin: 0px auto;
  border-collapse: collapse;
}

.transfers tr {
  border-bottom: 1px solid #cbcbcb;
}

.transfers th {
  font-family: "Montserrat", sans-serif;
}

.transfers th, td {
  text-align: center;
  /* border: none; */
  height: 30px;
  padding: 3px;
  font-size: 20px;
  width: 30%;
}

.transfers .id {
  text-align: left;
}

.transfers .date{
 
}

.transfers .amount{
  text-align: right;
}

    <div class="transfers">
        <table border>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>                
              <tr>
                <td class="id">211</td>
                <td class='date' >2022-03-29</td>
                <td class='amount' >IN: ￡4.00</td>
              </tr>                  
              <tr>
                <td class="id">211</td>
                <td class='date' >2022-03-29</td>
                <td class='amount' >IN: ￡4.00</td>
              </tr>                     
            </tbody>
        </table>
    </div>

uj5u.com熱心網友回復：

不是表格沒有居中。您的列以不同的寬度顯示。您可以插入最大或所有列的寬度以平均分配空間。

.transfers table{
  width: 650px;
  margin: 450px auto;
  }

.transfers .id{
  text-align: center;
  width: 33.333333%;
}

.transfers .date {
  text-align: center;
  width: 33.333333%;
}

.transfers .amount {
  text-align: right;
  width: 33.333333%;
}

  <div class="transfers">
<table>
    <thead>
        <tr>
            <th class="id">ID</th>
            <th class="date">Date</th>
            <th class="amount">Amount</th>
        </tr>
    </thead>

    <tbody>
        <tr>
        <td style='background-color: blue'>211</td>;
        <td class='date' style='background-color: blue'>2022-03-29</td>;
        <td class='amount' style='background-color: blue'>IN: ￡4.00</td>;
        </tr>;
    </tbody>
</table>
</div>

有關更多選項，您會發現一些方法可以幫助您 創建 3 個完全相等的列，這些列占瀏覽器視窗寬度的 100%

uj5u.com熱心網友回復：

.transfers table{
  width: 651px;
  margin: 450px auto;
  border-collapse: collapse;
}

.transfers tr{
  border-bottom: 1px solid #cbcbcb;
}

.transfers th{
  font-family: "Montserrat", sans-serif;
}

.transfers th, td{
  border: none;
  height: 30px;
  padding: 3px;
  font-size: 20px;
}

.transfers .id{
  text-align: left;
}

.transfers .date{
  text-align: center;
}

.transfers .amount{
  text-align: right;
}
td{width:217px;}

<div class="transfers">
        <table>
            <thead>
                <tr>
                    <th class="id">ID</th>
                    <th class="date">Date</th>
                    <th class="amount">Amount</th>
                </tr>
            </thead>

            <tbody>
                        <tr>
                        <td style='background-color: blue'>211</td>;
                        <td class='date' style='background-color: blue'>2022-03-29</td>;
                        <td class='amount' style='background-color: blue'>IN: ￡4.00</td>;
                        </tr>;
            </tbody>
        </table>
    </div>

標籤：html css

上一篇：在getElementById之后使用querySelectorAll在javascript中不起作用

下一篇：如何讓div中的影像完全占據Html和CSS？