Centering a table with text-align center
Question
I want to center a table, but although it's technically centered, the different length of the td's content makes the table have an empty space on the right.
.wrap { background: pink; padding: 0 50px; } table { margin: 0 auto; text-align: center; width: 100%; tr { td { padding: 10px; text-align: left; } } }
<div class="wrap"> <table> <tbody> <tr> <td>something here</td> <td>row 1 col 2 my </td> </tr> <tr> <td>row 2 col 1 hello world</td> <td>react.js</td> </tr> </tbody> </table> </div>
I can make the table and the td to be an aligned center but the different length of the td's content makes it look uneven.
.wrap { background: pink; padding: 0 50px; } table { margin: 0 auto; text-align: center; width: 100%; tr { td { padding: 10px; } } }
<div class="wrap"> <table> <tbody> <tr> <td>something here</td> <td>row 1 col 2 my </td> </tr> <tr> <td>row 2 col 1 hello world</td> <td>react.js</td> </tr> </tbody> </table> </div>
What I want is td's content should be align left and look center within the wrapper, like the labels on this image (ie Cam 1, Cam 2 etc):
3 answers
solution1
0 2017-09-15 03:51:10
You can assign width: 50% to <td> to make it of equal widths, like:
tr td {
text-align: left;
width: 50%;
}
.wrap { background: pink; padding: 0 50px; } table { width: 100%; text-align: center; } tr td { text-align: left; width: 50%; }
<div class="wrap"> <table> <tbody> <tr> <td>something here</td> <td>row 1 col 2 my </td> </tr> <tr> <td>row 2 col 1 hello world</td> <td>react.js</td> </tr> </tbody> </table> </div>
Hope this helps!
solution2
0 2017-09-15 03:51:37
I think I've worked out what you want... you want the text left-aligned but the column of text to be centered.
You can't do that with just HTML and CSS the way you have it structured, because each column isn't treated as a single unit in order to find the width to centre it.
For a pure HTML & CSS solution, you would have to restructure your table so that it treats the content of each column as a whole. You can display it as a <ul> , <p> , or even another table, eg
Working Snippet:
.wrap { background: pink; padding: 0 50px; } table { margin: 0 auto; text-align: center; width: 100%; table-layout: fixed; tr{ td { padding: 10px; text-align: center; width: 50%; } } } .cellcontainer { width: auto; display: inline-block; text-align: left; } td { border: 1px solid #555555; }
<div class="wrap"> <table> <tbody> <tr> <td> <div class="cellcontainer"> <p>something here</p> <p>row 2 col 1 hello world</p> </div> </td> <td> <div class="cellcontainer"> <p>row 1 col 2 my</p> <p>react.js</p> </div> </td> </tr> </tbody> </table> </div>
I've added a border to the table columns so you can see that the left-aligned content is centered within the column.
If changing the structure of your HTML isn't possible, you would need to use something like javascript to achieve this.
solution3
0 2017-09-15 03:58:50
You need to calculate the width of the table using javascript/jquery to have a better control with it. Check this sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
table {
margin : 0 auto;
background-color:#DDDDDD;
}
table tr td {
padding : 10px;
text-align:left;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td> * Sample content</td>
<td> * Sample content</td>
</tr>
<tr>
<td> * Sample content</td>
<td> * Sample content</td>
</tr>
</table>
<script>
$(document).ready( function() {
$('#myTable').css({
width: $('#myTable').outerWidth() + 'px'
});
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.