你能修好我的桌子嗎？

我希望所有值和按鈕都應位於水平和垂直中心。
但問題是：如果我輸入按鈕鏈接作爲任何行的值，然後按鈕和所有其他文本值顯示中斷而不是垂直。

見截圖： Screenshot 能否請你解決這個問題？

我的代碼：

<html lang="en"> 

<head> 
    <!-- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> --> 
    <title>CSS3 Feature Table</title> 

    <div id="main"> 
     <table class="features-table"> 
      <thead> 
       <tr> 
        <td></td> 
        <td>Standard</td> 
        <td>Links</td> 
        <td>Professional</td> 
        <td>Links</td> 
        <td>Business</td> 
        <td>Links</td> 
       </tr> 
      </thead> 
      <tfoot> 
       <tr> 
        <td>Total</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
      </tfoot> 
      <tbody> 

       <tr> 
        <td>Value1</td> 
        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 

        <td>2000</td> 

        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 
        <td>3500</td> 

        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 

        <td>6000</td> 
       </tr> 


       <tr> 
        <td>Value2</td> 
        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 

        <td>1900</td> 
        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 
        <td>3200</td> 

        <td> 
         <input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');"> 
        </td> 

        <td>5000</td> 
       </tr> 


       <tr> 
        <td>Value3</td> 
        <td>Value</td> 
        <td>300</td> 
        <td>Value</td> 
        <td>500</td> 

        <td>Value</td> 

        <td>900</td> 
       </tr> 

       <tr> 
        <td>Value4</td> 
        <td>Value</td> 
        <td>400</td> 
        <td>Value</td> 
        <td>700</td> 
        <td>Value</td> 
        <td>1000</td> 
       </tr> 




       <tr> 
        <td>Value5</td> 
        <td>Value</td> 
        <td>500</td> 
        <td>Value</td> 
        <td>1000</td> 

        <td>Value</td> 

        <td>3000</td> 
       </tr> 


       <tr> 
        <td>Value6</td> 
        <td>Value</td> 
        <td>200</td> 
        <td>Value</td> 
        <td>300</td> 

        <td>Value</td> 

        <td>400</td> 
       </tr> 


       <tr> 
        <td>Value7</td> 
        <td>Value</td> 
        <td>100</td> 
        <td>Value</td> 
        <td>300</td> 

        <td>Value</td> 

        <td>500</td> 
       </tr> 


       <tr> 
        <td>Value8</td> 
        <td>Value</td> 
        <td>200</td> 
        <td>Value</td> 
        <td>500</td> 

        <td>Value</td> 

        <td>700</td> 
       </tr> 


       <tr> 
        <td>value9</td> 
        <td>value</td> 
        <td>value</td> 
        <td>value</td> 
        <td>30</td> 

        <td>Value</td> 

        <td>50</td> 
       </tr> 

       <tr> 
        <td>Value10</td> 
        <td>Value</td> 
        <td>10</td> 
        <td>Value</td> 
        <td>20</td> 

        <td>Value</td> 

        <td>30</td> 
       </tr> 


       <tr> 
        <td>Value11</td> 
        <td>Value</td> 
        <td>10</td> 
        <td>Value</td> 
        <td>20</td> 

        <td>Value</td> 

        <td>30</td> 
       </tr> 


       <tr> 
        <td>Value12</td> 
        <td>Value</td> 
        <td>5</td> 
        <td>Value</td> 
        <td>10</td> 

        <td>Value</td> 

        <td>15</td> 
       </tr> 


       <tr> 
        <td>Value13</td> 
        <td>Value</td> 
        <td>5</td> 
        <td>Value</td> 
        <td>20</td> 

        <td>Value</td> 

        <td>40</td> 

       </tr> 



       <tr> 
        <td>Value14</td> 
        <td>Value</td> 
        <td>15</td> 
        <td>Value</td> 
        <td>30</td> 

        <td>Value</td> 

        <td>40</td> 
       </tr> 


       <tr> 
        <td>Value15</td> 
        <td>Value</td> 
        <td>Value</td> 
        <td>Value</td> 
        <td>30</td> 

        <td>Value</td> 

        <td>50</td> 
       </tr> 


       <tr> 
        <td>Value16</td> 
        <td>Value</td> 
        <td>300</td> 
        <td>Value</td> 
        <td>700</td> 

        <td>Value</td> 

        <td>1000</td> 
       </tr> 


       <tr> 
        <td>Value17</td> 
        <td>Value</td> 
        <td>100</td> 
        <td>Value</td> 
        <td>200</td> 

        <td>Value</td> 

        <td>300</td> 
       </tr> 



       <tr> 
        <td>Value18</td> 
        <td>Value</td> 
        <td>100</td> 
        <td>Value</td> 
        <td>200</td> 

        <td>Value</td> 

        <td>400</td> 
       </tr> 


       <tr> 
        <td>Value19</td> 
        <td>Value</td> 
        <td>100</td> 
        <td>Value</td> 
        <td>200</td> 

        <td>Value</td> 

        <td>300</td> 
       </tr> 


      </tbody> 
     </table> 
    </div> 
</head> 

</html> 
</div>

來源

2015-10-20 rwudeess

你可以分享你的CSS以及好嗎？或者使用https://jsfiddle.net/ –

創建代碼片段我沒有CSS。所以我給你一張桌子。 – rwudeess

然後你附加的截圖是你看到使用該代碼的內容？ –

，你可以在你的CSS添加vertical-align: middle;使表調整其值單元格的中間。還要添加text-align: center;以使文本位於單元格的中心。

這裏是我對於CSS：

<style> .features-table{ vertical-align: middle; text-align:center; width: 100%; } </style>

結果是：

來源

2015-10-20 03:22:14

你可以給出1行的完整示例嗎？ – rwudeess

這裏是我的css： '' –

嗨，我認爲你的代碼是正確的。但爲什麼在我的wordpress沒有這個工作。我認爲我的網站使用任何主題樣式和我們的表格CSS都無法覆蓋主題樣式。如果是的話，我該如何檢查並阻止？ – rwudeess

你能修好我的桌子嗎？

回答

相關問題