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 (i.e. Cam 1, Cam 2 etc):
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!
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>
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, e.g.
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.
Your question is complicated and unclear . But as I understood, you want to center a table not it's td's text. For that you can use margin:auto on your table and remove text-align:center and add width to your table (because full width cannot be centered), then your table will center without any .wrapper.
Example
HTML
<table>
<tr>
<td>Cam 1</td>
<td>Cam 2</td>
</tr>
<tr>
<td>Cam 3</td>
<td>Cam 4</td>
</tr>
</table>
CSS
table {
width: 70%;
margin: auto;
}
table tr td {
border: 1px solid black; /* Added Border, Remove It */
}
Added border to td, so you can check td's text alignment. And also changed td text (Sorry for that).
Related
Following code doesn't shrink the image to the row height and I don't understand why.
there are a lot of similar questions on the forum, but I can't seem to find the explanation or solution for this behaviour.
I can solve it easily enough by fixing the height of the image, but that doesn't learn me anything :)
<html>
<head>
<style>
tr { height: 3em; }
td { height: 100%; border: 1px solid green; }
img { height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td>some text</td>
<td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
</tr>
<tr>
<td>other text</td>
<td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
</tr>
</table>
</body>
A table cell will adjust its height to fit its content, which is the expected behavior: the more content you have, the taller it gets.
Rather than forcing td's height, you might want to give max-height to your img. See the snippet below.
tr {
height: 3em;
}
td {
height: 100%;
border: 1px solid green;
}
img {
max-height: 3em;
}
<table>
<tr height="3em">
<td>some text</td>
<td>
<img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
</td>
</tr>
<tr>
<td>other text</td>
<td>
<img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' />
</td>
</tr>
</table>
I have a problem that I do not understand regarding scaling of child elements inside html tables.
To start from the beginning, my goal is to have a table and to overlay the table body with a div using z-index. With the proper color this then looks like the table is inactive and it can not be clicked.
Below you find a minimal example of how this looks like due to some other requirement. As you can see, the overlay div always scales to the full table and not only a part of it. No matter if it is a child of tbody nor of one cell (as it is right now in the example code - I thought maybe a div is not allowed as a direct child of tbody but instead I could put one overlay div in each table cell).
table {
border: 1;
border-color: blue;
}
#content {
position: relative;
}
#content * {
position: inherit;
}
#overlay {
top: 0;
left: 0;
/*bottom: 0;
right: 0;*/
position: absolute !important;
background: rgba(0, 0, 0, .4);
z-index: 3;
width: 100%;
height: 100%
}
<div id="content">
<div>
Some stuff before
</div>
<br>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
Cell
</div>
<div id="overlay"></div>
</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
<br>
<div>
Some stuff after
</div>
</div>
I do not understand why this happens which makes it hard for me to think of a fix and I hope somebody can help me with that and provide an explanation.
Cheers
Your table cells also need to be set to position: relative. Instead of #content * directly set them using td or at least #content td.
td {
position: relative;
}
#overlay {
top: 0;
left: 0;
position: absolute;
background: rgba(0, 0, 0, .4);
z-index: 3;
width: 100%;
height: 100%
}
<div id="content">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
Cell
</div>
<div id="overlay"></div>
</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
</div>
So why does this work?
Short answer: position is not inheritable and Chrome has some problems with table tags.
But that's only half the truth. All major browsers (Tested with Chrome, Firefox and IE11) allow most (or probably even all) properties to inherit from their parent. When you test your snippet in Firefox or IE11 you will see that it indeed works. So why not in Chrome then?
It turns out that Chrome has some issues with the table-* display modes and the table-tags themselves. It always uses the default position value (which is static) when being inherited. Even if the closest parent has position: relative set, it won't work as illustrated in the next code snippet.
So to conclude: It's best to always explicitly set position: relative and in most cases avoid using inherit all together.
main {
position: relative;
border: 2px solid #000;
width: 200px;
margin-bottom: 20px;
}
table, .fake-table {
min-height: 50px;
margin: 10px;
}
table, tr, td, .fake-table div {
position: inherit;
}
.relative {
position: relative;
}
em {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-width: 100px;
height: 100%;
background: rgba(166, 199, 252, .9);
text-shadow: 0 0 10px #fff;
}
.fake-table .table {
display: block;
}
.fake-table .row {
display: flex;
justify-content: flex-start;
}
.fake-table .cell {
display: inline-block;
min-width: 40px;
}
<main>
<table>
<tr>
<td>...</td>
<td>
cell
<em>Starting point (inherited table)</em>
</td>
</tr>
</table>
</main>
<main>
<table>
<tr class="relative">
<td>...</td>
<td>
cell
<em>Parent is set to relative</em>
</td>
</tr>
</table>
</main>
<main class="fake-table">
<table class="table">
<tr class="row">
<td class="cell">...</td>
<td class="cell">
cell
<em>Table tags in different display mode</em>
</td>
</tr>
</table>
</main>
<main class="fake-table">
<div class="table">
<div class="row">
<div class="cell">...</div>
<div class="cell">
cell
<em>Table using flex (behaves correctly)</em>
</div>
</div>
</div>
</main>
<main>
<table>
<tr>
<td>...</td>
<td class="relative">
cell
<em>Expected rendering</em>
</td>
</tr>
</table>
</main>
A simple quick question, i have this HTML
<div id="list">
<table class="t">
<thead>
<tr>
<th class="w100"><div>ID</div></th>
<th><div>NAME</div></th>
<th class="w100"><div>EXTRA</div></th>
<th class="w100"><div>EXTRA1</div></th>
</tr>
</thead>
<tbody style="top: 0px;" page="0">
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
</tbody>
</table>
</div>
CSS
#list {
position: relative;
height: 200px;
overflow: auto;
}
.t {
height: 20000px;
overflow: auto;
width: 100%;
}
.t>tbody {
position: absolute;
border:solid 1px;
}
tr {
height: 20px;
width: 100%;
}
.w100 {
width: 100px;
}
how can I extend the NAME column to fill up the remaining space inside a position absolute tbody just like the thead does?
I need this css to remain like this:
.t>tbody {
position: absolute;
}
and the table must have a height so that I can scroll past the tbody content
everything else can be changed
here is a demo
https://jsfiddle.net/wyzixg/f3gqgjgj/5/
Can this be achieved by css and/or js/jquery?
I think that the following is what you need.
You were pretty close, except that the absolute positioning was confusing the auto sizing algorithm used in table layouts.
If you set the width of the table to 100%, then the table will resize the columns to fill up the space. Since you set the width of all columns (except the 2nd one for NAME) to 100px, any remaining width will be allocated to the 2nd column since its width will be auto.
Since you need the tbody element to be position: absolute, you can still get the auto table sizing effect by using display: table on tbody, which looks a bit bizarre but it might do the trick.
I am not sure if your JavaScript will work as expected, but the layout seems to be what you need.
There is an artifact, a second horizontal scroll bar, which can probably be removed with some experimentation, but I did not try it (yet).
body { margin: 0;}
.c-list {
position: absolute;
width: 99%;
height: 400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px dotted blue;
}
table {
}
.t tbody {
position: absolute;
width: 100%;
display: table;
}
table td {
text-align: center;
border: solid 1px;
margin: 0;
padding: 0;
}
.w100, .wr100 {
width: 100px;
}
.wr100 {
text-align: right;
}
<div class="c-list">
<table class="t">
<tbody>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">1</td>
<td>1</td>
<td class="wr100">1</td>
<td class="w100">1</td>
</tr>
<tr>
<td class="w100">2</td>
<td>2</td>
<td class="wr100">2</td>
<td class="w100">2</td>
</tr>
<tr>
<td class="w100">3</td>
<td>3</td>
<td class="wr100">3</td>
<td class="w100">3</td>
</tr>
<tr>
<td class="w100">4</td>
<td>4</td>
<td class="wr100">4</td>
<td class="w100">4</td>
</tr>
<tr>
<td class="w100">5</td>
<td>5</td>
<td class="wr100">5</td>
<td class="w100">5</td>
</tr>
</tbody>
</table>
</div>
Use <thead> for table headers, along with <th>, so you can set the header width to 100% to fill the remaining space, and it will apply for the entire column.
Check this snippet for a better view of the result.
Also you don't really need the height for the table, and absolute.
.c-list {
position: absolute;
width:99%;
height:400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
table td {
text-align: center;
border:solid 1px;
margin:0;
padding:0;
}
.t > tbody {
position: absolute;
width: 99%;
}
table {
width:100%;
}
table tr{
width:100%;
}
table tbody {
width:100%;
}
.w100 {
width:100px;
}
.wr100 {
width:100px;
text-align: right;
}
<div class="c-list" >
<table style="height: 2000px;" class="t">
<tbody style="top: 0px;" page="0">
<tr><td class="w100">ID</td><td>NAME</td><td class="wr100">EXTRA</td><td class="w100">EXTRA1</td></tr>
<tr><td class="w100">1</td><td>1</td><td class="wr100">1</td><td class="w100">1</td></tr>
<tr><td class="w100">2</td><td>2</td><td class="wr100">2</td><td class="w100">2</td></tr>
<tr><td class="w100">3</td><td>3</td><td class="wr100">3</td><td class="w100">3</td></tr>
<tr><td class="w100">4</td><td>4</td><td class="wr100">4</td><td class="w100">4</td></tr>
<tr><td class="w100">5</td><td>5</td><td class="wr100">5</td><td class="w100">5</td></tr>
</tbody>
</table>
</div>
My issue is simple and i suspect the answer is its not possible as i couldn't find any examples.
I have a table built with css and HTML. I would like to re-size it proportionally as if it was an image so it fits inside a DIV. I know you guys know what a table looks like but seems like i have to submit some code to submit this questions so i added it below
<table>
<tr>
<td></td>
</tr>
</table>
Assuming that's not possible is it possible to convert a table into an image and then i can re-size the image?
You can set the width of the table to be 100% of the containing div, then set the <td>'s to be a percentage of the table.
An example would be something like this: http://jsfiddle.net/9VFQ5/
<div class="container">
<table>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>
.container {
width: 25%;
background-color: red;
}
table {
width: 80%;
margin: 0 auto;
background-color: blue;
}
td {
width: 50%;
color: white;
}
.container {
width: 100%;
background-color: blue;
}
table {
width: 80%;
margin: 0 auto;
background-color: red;
}
td {
width: 50%;
color: white;
padding: 1rem;
background-color: green;
}
th {
color: black;
}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container">
<table>
<tr>
<th>1st COLUMN</th>
<th>2nd COLUMN</th>
</tr>
<tr>
<td>Table Data1 Row1</td>
<td>Table Data2 Row1</td>
</tr>
<tr>
<td>Table Data1 Row2</td>
<td>Table Data2 Row2</td>
</tr>
</table>
</div>
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table,
you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}