rwudeess
Reputation: 19
Can you please fix my table?
I have a table.
- I want all values and buttons should be in center horizontally and vertically.
- But the problem is: If I enter the button link as a value of any row then button and all other text values displaying broken and not vertically in middle.
See screenshot: Screenshot Can you please fix this?
My code:
<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>
Upvotes: 0
Views: 60
Answers (1)
Meri Alvarado
Reputation: 191
you can add vertical-align: middle; in your css to make the table align its values to middle of the cell. Also add text-align: center; to make the text on the center of the cell.
here is my css for that:
<style>
.features-table{
vertical-align: middle;
text-align:center;
width: 100%;
}
</style>
The result is:
Upvotes: 1
Related Questions
- Button on table header
- Html Table Button Taking too much space
- Issue with getting buttons side by side in table row
- Button alignment issue?
- Issue with button in a Html/Css table and Mysql
- My Cssed Button in html table is not getting styled correctly php
- CSS buttons aren't aligned
- Button Problems
- HTML table giving me trouble
- CSS - Button doesn't fill table cell