I have table with width: 100% and an element in that table with width: 40em; max-width: 100%, but the element is still stretching the table when the browser window gets too small.
I want this element to be a fixed width but not be larger than the container if the container gets too small. If there's not enough room for the fixed width, max-width: 100% should make it smaller to fit the available space. This works outside of a table.
Note that the max-width is not on the table itself. It is actually on an <input> element, although the code I've linked includes a separate table with the same problem on a <span> element. It also includes an <input> field outside of the table which behaves correctly.
link to jsfiddle
You should use table-layout: fixed for the table element to get the max-width properties of <td>'s descendants to work.
From the MDN:
The table-layout CSS property defines the algorithm to be used to
layout the table cells, rows, and columns.
fixed value:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
table {
table-layout: fixed;
}
WORKING DEMO.
if you put it on the element, the element gets stretched to max-width: 100%.
If you want fixed width, use width: 40px (instead of %, percentages are used in liquid layouts)
Related
Is this a way to set a percentage padding inside a table cell without hard coding a width of this cell?
I have a table with dynamically changing number of columns, each of which must have an equal width, so I set:
table
{
table-layout: fixed;
}
It works great, but I also want to set a percentage padding inside several cells. Unfortunately, because of uncertain number of columns, I can't set a particular width to these cells.
If I just set:
table tbody tr td.with_padding
{
padding: 20%;
}
it looks like a padding for sells is calculated depending on width of whole table rather than of particular cell.
How can I solve this with pure CSS, if possible?
I have 2 table (To make make my header fixed I am using this approach). All table width is in percentage for responsive approach.
Table 1: Only to show header(only one column).
Table2: To show data.It's wrapped in div with style height:70px & overflow:auto; hence it it can be scrollable.
Both table have same width, but it is not aligned in line, If I remove height:70px then it works, it is due to scrollbar I think.
Question:
1. Is any solution to fill space(attached image)
2. Is there any way to show scrollbar
out of div.
JSFIDDLE for same.
Your 1st and 2nd points are actually related. The second table's width is being affected because it is including the width of the vertical scrollbar. Something you could try to fix both of your issues is to compensate for the 17px width of the scrollbar by doing this on your second DIV:
width: calc(90% + 17px);
And making your table 100% width:
width: 100%;
https://jsfiddle.net/tp0ht500/2/
You can use CSS calc to combine pixel and percentage widths, which in this case allows you to match the width while taking the width of the scrollbar into account.
Demo
I'm trying to make a table that contains a horizontal scrollbar where the width of any individual row can be set to whatever I want. I've tried two different approaches to achieve this and they each give me problems:
If I assign a width to my table that is larger than its containing div and apply overflow-x: scroll, the table exceeds the width of its container. However, I have no control over the width of my cells. Setting td{width:'x'px;} doesn't do anything.
If instead I apply table-layout:fixed to the table, I can now adjust the width of individual rows but cannot exceed the width of the table container.
How do I get the best of both worlds? I need the table to exceed the width of the container in order to get the scrollbar, while also being able to set the width of different rows to any value.
HTML table and table cells work this way by design - cells will always be confined to within the width of the table. If you want to size them like you do to normal inline-block elements, you can either:
Use <div class="table"> and <div class="cell"> to markup and style tables.
OR
Change the display mode in CSS. {display: block} for tables, {display: inline-block} for cells. You'd probably also need to fiddle with the display modes of other elements like <tr>, <th>, <thead>, <tbody>...
A little note: just in case you are using tables as a means to layout your page content, please stop and strongly reconsider changing your approach. Tables are a nasty crutch for layout, and should really ONLY be used to display actual tabular data.
Set the position: absolute; for the element that you want to exceed it's container width. But also set position: relative; to its parent, so you can adjust the position.
How can I format a table row to inherit the height of the content? I wish to have something like
I have tried
table{
table-layout:fixed;
width:700px;
}
but that does not work
Tyipcally, a table will inherit the height of the content provided that the columns have a defined width using either percentage of the total table width or absolutel pixel "px" definitions. IN addition, be sure that the table rows do not have a specified height i.e. 'height: 30px'.
Code Solution:
table {
width: 700px;
}
table tr td {
width: 350px;
height: auto;
}
A row cannot inherit inherit from the cells, as an element cannot inherit from its descendants, only from ascendants. But the calculation of a table row height takes the cell height requirements into account automatically, by the table height algorithms.
This happens in the example presented, too. Using the style sheet given and the simplest possible table markup, the result is as requested, apart from vertical alignment. That alignment is a separate issue and easily handled with td { vertical-align: top }.
If your page does not behave that way, please provide an example that demonstrates the issue (HTML and CSS code).
When you specify the column-width property in CSS for a div with a bunch of text in it, the actual width seems to be automatically adjusted so that an exact number of columns fit the page. If a column-width of 400px, for instance, is specified and there's actually 1000px of space then instead of showing 2.5 columns of text (with the .5 column overflowing to the right to invite the user to pan), it instead shows an even 2 columns of text.
I found in the dev.windows.com that if you specify values for all of the width properties involved (width, column-width, column-gap, and column-rule-width) then you can achieve this, and that works, but it requires that you determine the width of your containing div and that seems silly since you want that to flow.
Here's my CSS that's not working as I'd like...
.csscolumns .columns {
columns: 400px;
overflow-x: scroll;
height: 600px;
padding: 20px;
}
Have you tried tweaking with 'overflow' in your CSS? Try the following for the selected elements:
overflow: hidden;
This will hide any 'overflowing' content of the selected elements, behind the parent elements.