I have an HTML structure from an legacy app I have to style like our new app. For this I need to add margin only for the tbody. So setting padding in table won't work because the header should be as wide as the table.
Here's a little sketch what it should look like:
Why do I need that? I have to put two tables side by side and it should look like as there is only one header but two content tables.
I played around with padding and borders of the thead element but the problem is that the thead has a bottom border which isn't applied to the right border.
Edit:/
The picture is about what I want. The two tables are mentioned because that's the reason I want one table to look like that.
Solutions are welcome if they style the table like I showed in the picture or style two tables with two different tbodys and theads like they would have one thead.
What I need are still correct labels for the columns in tbody but the left and the right column should be a little bit wider to stretch it to the whole table.
Edit:/
Because there was some confusion what I meant here is a screenshot of the style I want to accomplish without altering the DOM structure with JS:
set display:table to tbody and use custom width for that easily.
Complete Demo
HTML:
<table>
<thead>
<tr><td>Head1</td></tr>
<tr><td>Head2</td></tr>
</thead>
<tbody>
<tr><td>Body1</td></tr>
<tr><td>Body2</td></tr>
<tr><td>Body3</td></tr>
<tr><td>Body4</td></tr>
</tbody>
</table>
CSS:
table{
width: 500px;
background: #808080;
}
thead{
width: 100%;
text-align: center;
background: #FF6347;
}
tbody{
display: table;
width: 400px;
margin: 0 auto;
text-align: center;
background: #FFF;
}
your calendar is actually two subtables (including a header with day names). from that point of view, using two cells with padding on the outer table would give you the desired effect
Related
I have a table inside of a table, I want the outer table to always be 100% of the parent's width with no horizontal scrolling and then the inner table to have a horizontal scroll bar (only if it has enough columns that it needs it).
Here's an example that is causing the html element to scroll and is making the outer table stretch, this is no good.
Fiddle: https://jsfiddle.net/w31Lhe8w/6/
When you show the inner table you see it stretch the outer table, and when it's hidden the outer table fits it's parent perfectly with no scrolling. Ideally, keeping the html the same (except for some css classes of course) would be best as this html is what works best in my project. Any solution may be helpful, however.
Thanks.
Here is one way of doing it.
First, add position: relative to the containing td element:
<td colspan="6" style="position: relative;">
You then apply a new CSS rule to the enclosing div:
<div class="innertable">
as follows:
.innertable {
border: 1px dotted blue;
overflow: auto;
position: absolute;
left: 0;
right: 0;
}
This seems to work pretty well for one or more rows of the inner table.
See fiddle at: https://jsfiddle.net/audetwebdesign/c7o3f0mp/
I am using the example mentioned here in my project. I want to stretch the table to fit the whole page.
So, I did:
html, body{
height: 100%;
}
#gridContainer {
height: 100%;
}
table{
width: 100%;
height: 100%;
}
The problem is, only the table header appears on the page and it is stretched properly. The rows do not show up. I also tried to place the <script> before the <style>, but no luck.
How do I fix this?
Make the below change.
table, div {
width: 100% !important;
}
.dojoxGridxBody, .gridContainer, table, #gridContainer {
width: 100% !important;
}
If you want to make no other changes you will have to use !important to override some of the original CSS. But you can use the chrome inspector to find out what this style is overriding, remove the widths that would be set without this in the old CSS and then remove the !important
This page is far from ideally laid out however, as when you change the column structure the page just gets wider and wider. You have multiple tables and divs within these when actually you only need one table.
I am making a site with tables mobile responsive. How do I make table td take up the whole full width(100%) using css?
<table>
<tr>
<td>Column One</td>
<td>Column Two</td>
</tr>
</table>
It is too hard to read information in two columns close to each other.
This will show the cells one below the other:
td {display:block;width:99.9%;clear:both}
or, as noted by #nux,
td {display:block; box-sizing:border-box; clear:both}
either should be enough, although microsoft browser won't oblige and you might need proprietary markup for those; then again if people plan to use a browser on their phone they wouldn't buy a microsoft phone, so the problem is minor.
When in mobile screen, change the tr to display:flex and td set to width 100%. Like below:
#media screen and (max-width: 576px){
tr {
display: flex;
flex-wrap: wrap;
}
td {
width: 100%;
}
}
If your table td has a border, you might want to remove the first columns of td border in mobile so that first column td content will looks like it is in the same columns with 2nd td in mobile:
tr td:first-child {
border: none;
}
The answers above are correct but you need to also make sure you'r td element has a reference for its 100% width otherwise it may not work. You should have this rule set at the start of your stylesheet:
body, html {
width: 100%;
}
Take a look at this thread for more info:
HTML table td not full width when using display block and 100% width attributes
First, you need to make sure that your table has 100% width, then you can do the same with the th and td
table, td {
width: 100%;
}
EDIT:
since you edited your original post, you should give the first td a class
<td class="first">
td.first {
width: 100%;
}
This will cause the first column to use as much of the page as it can and the second td will be just wide enough for the content. You may have to give it a width too if you don't want your text to wrap or something.
Please see this JSFIDDLE
td.rhead { width: 300px; }
Why doesn't the CSS width work?
<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>
Also, what are the effects of position:fixed, absolute etc have on td widths if any? I am looking for a reason more than a fix. I am hoping to understand how it works.
This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify, e.g
<td><div style="width: 300px;">wide</div></td>
This shouldn't make much of a difference if the <table> itself is position: fixed or absolute because the position of the cells are all static relative to the table.
http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/
EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.
You're better off using table-layout: fixed
Auto is the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit.
Fixed is far better and renders quicker to the page. The structure of the table is dependent on the tables overall width and the width of each of the columns.
Here it is applied to the original example: JSFIDDLE, You'll note that the remaining columns are crushed and overlapping their content. We can fix that with some more CSS (all I've had to do is add a class to the first TR):
table {
width: 100%;
table-layout: fixed;
}
.header-row > td {
width: 100px;
}
td.rhead {
width: 300px
}
Seen in action here: JSFIDDLE
The reason it doesn't work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each. Shrink the number of columns and it works. You can't fit that many on the screen.
If you want to force the columns to fit try setting:
body {min-width:4150px;}
see my jsfiddle: http://jsfiddle.net/Mkq8L/6/
#mike I can't comment yet.
The reason, is, because you did not specify the width of the table, and your whole bunch of td's are overflowing.
This for example, i've given the table a width of 5000px, which I thought would fit your requirements.
table{
width:5000px;
}
It is the exact same code you provided, which I merely added in the table width.
I believe what is happening, is because your TD's are way past the default table width. Which you could see, if you pull out about 45 of your td's in each tr, (i.e. the code you provided in your question, not jsfiddle) it works exactly fine
Try this it work.
<table>
<thead>
<tr>
<td width="300">need 300px</td>
Try to use
table {
table-layout: auto;
}
If you use Bootstrap, class table has table-layout: fixed; by default.
My crazy solution.)
$(document).ready(function() {
$("td").each(function(index) {
var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
$(this).html(htmlText);
});
});
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
If table width is for example 100%, try using a percentage width on td such as 20%.
Wrap content from first cell in div e.g. like that:
HTML:
<td><div class="rhead">a little space</div></td>
CSS:
.rhead {
width: 300px;
}
Here is a jsfiddle.
You can also use:
.rhead {
width:300px;
}
but this will only with with some browsers, if I remember correctly IE8 does not allow this. Over all, It is safer to just put the width="" attribute in the <td> itself.
I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:
http://www.uploadup.com/di-UEFI.png
middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)
What is the CSS can do it? with compatibility in all browsers.
note: i saw this page, but i don't know how to change it for my wish
You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.
So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:
At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
And then just add the all columns that you need.
If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:
You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.
Enjoy :)
To make this work in IE6/7 without JavaScript, the easiest way to do this is with a table.
I know, I know. It's not that bad in this case, all considered.
See: http://jsfiddle.net/thirtydot/Q2Qxz/
Tested in IE6/7 + Chrome, and it will just work in all other modern browsers.
HTML:
<table id="container" cellspacing="0" cellpadding="0">
<tr>
<td id="left">fluid</td>
<td id="mid">fixed</td>
<td id="right">fluid</td>
</tr>
</table>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0
}
#container {
border: 0;
table-layout: fixed;
width: 100%
}
#container td {
vertical-align: top
}
#mid {
width: 250px;
background: #ccc
}
#left {
background: #f0f
}
#right {
background: #f0f
}
If you don't use one of the ready templates out there,
You can start by three div floated left, the middle with width: 250px and the outside ones with
min-width: 150px
You might want to replace it with the <section> tag, just give it a display: block