對齊的數字水平的中間偏右

我試圖完成對齊的數字水平居中的盒子，但像這樣的圖像中排列的數字權：對齊的數字水平的中間偏右

如果你覺得我應該嘗試不同的方法請給我建議。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.table{ 
 
    width: 70px; 
 
    border-collapse: collapse; 
 
    border-width: 0; 
 
} 
 
th,td { 
 
    padding: 2px 5px 2px 5px; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="check.css"> 
 
</head> 
 
    <body> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Numbers</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td><span>8</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>9</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>10</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>11</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>12</span></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
    </body> 
 
</html>

數將是動態的（在一到四個字符）

來源

2017-09-24 Emdadul Haque

什麼問題，你的代碼是好的，不是？ –

@TemaniAfif，我也很強悍，一見鍾情，我沒有看到它，但數字右對齊的圖像（幾十對齊十等等）。 –

啊好吧，我看到了，我認爲傑克給出了正確的答案，所以;） –

我加了邊框，所以你可以看到我是如何做的。

對齊td內容中心。

對齊td > span內容到右，在給它小的寬度。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.table{ 
 
    width: 70px; 
 
    border-collapse: collapse; 
 
    border-width: 0; 
 
} 
 
td {text-align: center; border: 1px solid red;} 
 
td span { 
 
    padding: 0; 
 
    text-align: right; 
 
    border: 1px solid blue; 
 
    width: 31px; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="check.css"> 
 
</head> 
 
    <body> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Numbers</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td><span>8</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>9</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>10</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>1122</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><span>112</span></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
    </body> 
 
</html>

來源

2017-09-24 21:24:29 jack

好主意，包括邊界，澄清框的佈局。 –

除了上述解決方案，我不得不說，這種情況下，它可能是使用等寬字體是一個好主意。

來源

2017-09-25 12:48:33 jack

，並不需要設定明確的大小的另一種選擇（所以會與任何字體和/或位數工作）：

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.table{ 
 
    width: 70px; 
 
    border-collapse: collapse; 
 
    border-width: 0; 
 
} 
 
tbody tr:nth-child(odd) { background: #eee; } 
 
th,td { 
 
    padding: 2px 5px 2px 5px; 
 
    text-align: right; 
 
} 
 
tbody tr::before, tbody tr::after { 
 
    content: ''; 
 
    display: table-cell; 
 
    width: 50%; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="check.css"> 
 
</head> 
 
    <body> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th colspan="3">Numbers</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>8</td> 
 
       </tr> 
 
       <tr> 
 
        <td>9</td> 
 
       </tr> 
 
       <tr> 
 
        <td>10</td> 
 
       </tr> 
 
       <tr> 
 
        <td>11</td> 
 
       </tr> 
 
       <tr> 
 
        <td>12</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 

 
    </body> 
 
</html>

祕訣就在於增加了兩個「僞細胞「，每行佔用一半可用寬度。

來源

2017-09-25 21:33:45

不以鉻最新版本爲中心 – PirateApp

@PirateApp，這是真的，它看起來像Chrome改變了表的行爲。然而，將'table-layout：fixed'設置爲'.table'元素似乎將內容再次居中（儘管不理想）。 –

我經歷了同樣的問題去和整個下面的建議，我不覺得這是最佳的來到

使用的列（怎麼樣的反應？）
使用額外列兩側微胖（語義人？）
將一個表中的TD內（性能的人？）

通過每一個角落去後，我相信我有最佳的解決方案爲t他的問題 Flexbox的救援！

簡單的一招：只需添加充當Flexbox的容器，並有2個孩子跨度與兩個內容片段內的TD內的跨度。你的專欄可以是任何大小，這仍然像一個魅力！

<style> 
*{ 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
    font-family: sans-serif; 
} 
html, body{ 
    width: 100vw; 
    min-height: 100vh; 
} 
body{ 
    display: flex; 
    flex-direction: column; 
} 
#content{ 
    flex: 1; 
    display: flex; 
    flex-direction: row; 
} 
#left, #right{ 
    flex: 2; 
} 
#center{ 
    flex: 6; 
} 
table{ 
    border: 1px solid #ddd; 
    border-collapse: collapse; 
    width: 100%; 
    margin-bottom: 1rem; 
} 


table th, 
table td { 
    padding: 0.75rem; 
    vertical-align: top; 
    border-top: 1px solid #e9ecef; 
} 

table thead th { 
    vertical-align: bottom; 
    border-bottom: 2px solid #e9ecef; 
} 

td{ 
    text-align: center; 
} 
span.left{ 
    flex: 1; 
    background: lightcoral; 
    text-align: right; 
} 

span.right{ 
    flex: 1; 
    background: lightblue; 
    text-align: left; 
} 

.flexwrap{ 
    display: flex; 
    flex-direction: row; 
} 
</style> 
<body> 
    <div id= "content"> 
     <div id = "left"></div> 
     <div id = "center"> 
      <table> 
       <thead> 
        <th>Column 1</th> 
        <th>Column 2</th> 
        <th>Column 3</th> 
        <th>Column 4</th> 
        <th>Column 5</th> 
        <th>Column 6</th> 
        <th>Column 7</th> 
       </thead> 
       <tbody> 
        <tr> 
         <td> 
          1 
         </td> 
         <td>Item 1</td> 
         <td> 
          <span class="flexwrap"> 
           <span class = 'left'> 
            13737 
           </span> 
           <span class = 'right'> 
            .9 
           </span> 
          </span> 
         </td> 

         <td>Table Cell</td> 
         <td>Table Cell</td> 
         <td>Table Cell</td> 
         <td>Table Cell</td> 
        </tr> 

        <tr> 
         <td> 
          1 
         </td> 
         <td>Item 2</td> 
         <td> 
          <span class="flexwrap"> 
           <span class = 'left'> 
            2 
           </span> 
           <span class = 'right'> 
            .34000004 
           </span> 
          </span> 
         </td> 

         <td>Table Cell</td> 
         <td>Table Cell</td> 
         <td>Table Cell</td> 
         <td>Table Cell</td> 
        </tr> 
       </tbody> 
      </table>   
     </div> 
     <div id = "right"></div> 
    </div> 
</body>

我給跨度着色，以便你可以在輸出中看到它們。希望有幫助

來源

2018-01-02 10:17:16 PirateApp

對齊的數字水平的中間偏右

回答

相關問題