I am trying to decrease a table width to 700px
the table is underneath < h2>Cart Totals< /h2> and no matter how I apply "width: 700px;" the table will not decrease in size.
http://clients.rocoru.com/trendyheadboards/?page_id=6
Your problem is the following rule in master.css, line 687:
#costing-container, .shipping {
width: 980px;
border-top: 1px dotted #ccc;
}
Your applied the shippingclass to a tr inside your table, thus stretching it to 980px. If your remove that class or change its width-rule to 700px your table will display like you want it to.
The answer provided by Johannes sounds correct, but if you do not want to modify the master.css file, try applying an id to the table in question and change the other css to
#table_id tr {
width: 700px !important;
}
This should ensure that your styling doesn't shrink other table elements.
Related
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.
I was curious if this is possible with CSS, or even HTML? Say, I have a parent DIV that houses a TABLE:
<div class="divClass">
<table class="tableClass">
</table>
</div>
The table displays user content, so I have no control over its text. Is there any way to limit the width of the table so that it doesn't go over, say 750 pixels?
PS. Normally table cells wrap words to the next line if there's not enough width, but problem happens forWordsLikeThisWithoutAnyActualWhiteSpacesBetweenThem. In that case the table gets too wide and destroys the page layout.
.tableClass {
max-width: 750px
word-break: break-all;
}
should do the work.
or you may also try
.tableClass {
table-layout:fixed;
}
.tableClass td {
overflow: hidden;
}
and assign width for each tds in the first line.
Write like this:
.tableClass{
display-layout:fixed;
word-wrap: break-word;
}
td{word-wrap:break-word;
max-width: 750px;}
I'm trying to play with tbody and and thead heights, and it turned out that webkit, contrary to other browsers, does not behave as I expected.
I've actually set td height.
Here is what I'm talking about
The question is - which browser behaves correctly and, even if webkit renders correctly, how can I make it render items just like in non-webkit browsers?
If you know the height of the inner cells, then you could just insert a pseudo-element after the table: http://dabblet.com/gist/4332648
However, in that case there are better solutions like paddings etc :)
So, let's pretend we don't know the number of rows, but we know the height of a table. If we can somehow reserve the place for it, then we could make this table absolute positioned, insert very high pseudo-element and use clip to remove the unneeded space: http://dabblet.com/gist/4332690. And if we'd need a border, well, another pseudo-element would help — http://dabblet.com/gist/4332702.
I fear, that there could be only hacks to emulate what you want and no other ideal solutions.
Don't set both a height for TABLE and TD. Choose ONE.
for your cells, use min-height instead of height or both.
table {
border: 1px solid red;
height: 200px;
width: 400px;
}
thead td {
min-height: 10px;
}
tbody {
}
tbody td {
background: pink;
min-height: 10px;
}
Hai ,
I am using a html table for my website layout .
when we press enter in one cell , the cell is resizing.
I used css for fixing the table layout. table layout is not changing .But cell is resizing.
.pageContent table
{
height:100%;
width:100%;
table-layout:fixed;
}
.pageContent table tr td
{
padding:5px 10px 5px 10px;
}
how to prevent this resizing of table cells ?
Your table is re-sizing because you are using proportional widths.
There are many ways you can control this. For example, by setting your or height in pixels:
CSS:
table td {height: 20px;}
Your cells will no longer re-size vertically.
Have you tried adding the following CSS
td { overflow:hidden;white-space:nowrap; }
tr { height:1em; } /* or set an appropriate height and width */
This will hide the overflow in the cells however, but they won't resize.
Your layout might be easier to do with semantically correct HTML, using <div> elements but would need to see the markup.
It's hard to be sure, but you haven't set a size on the td in question, only padding. So the td will be expanding to contain whatever is inside it. In some browsers this might change a wee bit with focus.
Could you try setting an explicit width and height (in ems or pixels) for the td?
.pageContent table tr td
{
padding: 5px 10px 5px 10px;
width:8em;
height:2em;
}
Could you post a bit of your markup, or let us know what the content in the cells is? (And which browsers you're seeing the problem in).