I would like to have an HTML element, such as a table with a min and max width; I thought I would be able to use the following two attributes in CSS:
min-width
max-width
I want my table to have a minimum width of 1000px and a maximum width of 1230px; basically I want it to grow based on whats in the table elements TD. So,
min-width: 1000px;
max-width: 1230px;
Will this work? It doesn't seem to work for me as I want so I know I don't understand something; basically my table is always 1000px and it won't grow even if I try and force the size of a TD by giving it a large width. Table basically starts like this,
<table style="min-width: 1000px;max-width: 1230px;">...
You need to add width:100% so the table tries to grow to fit its container, but is constrained by its max-width.
Related
I'm trying to create a table e.g. 8 number of columns. It works fine on the desktop screen. However, when trying on a smaller screen or trying to reduce the size of the browser, tds get divided equally and content gets squeezed.
I want to have the min-width of the td to be say 200px. How can we achieve this?
I tried
table-layout: fixed
td { min-width:200px;
}
Apparently, min-width on td does not work.
I also tried putting <td><div style:"min-width:200px"></div></td>
However, this does not work. td's border and the content in the divgets out of placed when doing so.
Is there any idea?
I can use bootstrap 3 as well if that solves the issue.
Thanks.
table-layout: fixed , this attribute (fixed) affects min-width. When I set it to automatic or inherit, and add the style min-width:200px, the td's width will not change when the width of browser's window is shrinked.
Trying to use background size cover in a table and not getting the results I am after.
See:
http://jsfiddle.net/pp9st63L/1/
.image th {
background-size: cover !important;
height: 300px;
width: auto;
}
The data columns (not including left most column) should be equal width, but the number of columns is variable. Sometimes 3 and other times 4 (including left headline column).
The width of these data columns should be equal and sufficient that the background image can cover. If there is any long data in the other. Currently the width of the columns is purely related to the data in those columns. I would like to override this behavior with CSS and set max widths for columns and make them equal width. So the background-size cover will work.
Any thoughts on how to get this to work?
Just delete display:block and max-width, use width for table cell. background-size:cover works for me. For some 'beautiful' you may also use background-position:50% 50% or background-position:50% 0px for images. For table-cells same width properties (30% 30% 30% or 30px 30px 30px 30px) is a point to set those width always be the same.
P.S. Sorry for my very bad English.
UPD
Also set width for the first col
Example
UPD 2
Please check, that tr { td {...} } was error. You should use tr td {...} .
Also check, that for set image properties you should use background-image property in tags.
And width:auto I wrote specially to show that you don't need set width for narrow column to set it width to all other space of table.
Also width for table-cell is a min-width. So, text in cells can change the width. But it could be change by hyphenation (word-wrap).
Example 2
I have set table-layout: fixed, width and padding for column but real width is higher per 22px than it should be. What can cause this?
You have set the table width to 1000px and cell widths in pixels, too, so that they do not add up to 1000px. Obviously, a browser has to make the cells wider or to ignore the setting on the table as a whole. It is better that you as an author make such a choice, e.g. by simply removing the width setting on the table.
I'm trying to style a table according to the following requirements and getting nowhere:
the width of some columns must shrink to fit contents.
the width on other columns must divide up remaining available width among themselves.
table width must fill, but not exceed, parent width.
I came up with one approach ... set the shrinking columns width to 1px. That seemed to do the trick until the content of the expanding columns grows and ends up increasing the width of the table to exceed the width of it's parent, which violates the last requirement listed.
Any ideas? I'm broke.
I'm using Compass/Sass hyphenation, which helps with the last requirement (table does not exceed parent width). Works in Chrome perfectly. In Firefox, the table width is just a little too far. This is what my styles look like:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
#include hyphenation;
}
Sounds like you are using pixel widths instead of percentages. If you are, try "60%" or another appropriate value. Can you post your code?
td.actions {
table-layout:auto;
}
I have a cell that is 10% wide with a couple words in it. When you shrink the window size, the size keeps getting smaller until it matches the length of the text inside and then it stops shrinking. I want it to stay at an exact 10% wide. How do I do this?
Sorry, working with divs is not an option.
This might do the trick:
#your_table {
table-layout: fixed;
}
Tables can (should, as it's up to browsers to implement this) have two types of layouts:
table-layout: fixed: This is the "stupid" table layout. The table doesn't care about its contents and just resizes carelessly.
table-layout: auto: This is the "smart" table layout. The table cares about it's contents and stops resizing cells once the minimum width and height of a cell is reached. This is default table behavior.
Thank you W3C: http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
It looks like what you really want is a set width. If you say that the table has to be 300px, you can specify that the cell is always 30px. The relative scale is what's causing the problem.
table.myClass{
width: 300px;
}
table.myClass td.myOtherClass{
width: 10%;
}