<table>
<tr>
<th><img src="image.jpg" /></th>
<td>row1 column2</td>
<td>row1 column3</td>
<td>row1 column4</td>
</tr>
</table>
Results
If the height of the img is equal to 10px, the height of all cells in that row equals 10px.
Adding a border to the td's results in the td's looking taller then the img.
Note: the img is contained in a th because I do not want a border around the img, only the td's.
Desired Results
As displayed in the image above, the height of the td's should be adjustable so that their top and bottom borders can be aligned with the img.
Research
Using CSS to specify a height on the td's only works if the height is larger then the height of the img (in other words, the td's cannot be smaller then the img).
Additional research indicates that this is just the way tables work.
Generally speaking, in a table, the <td> elements are all the same size within a row, that is the purpose of the rows, you can align the cell contents within the row, but otherwise the row will have a consistent height. The height of the row defaults to the maximum height of any cell within it. Horizontal borders run with rows generally.
The only way to alter this really is to use rowspan with additional rows thrown in for positioning, but that is ugly in the extreme.
Do keep in mind that tables are for tabular data only, and should generally be avoided for other purposes, particularly layout.
I'm not sure I understand, you want border on the "inside" instead of the "outside"?
This is easily accomplished with CSS and divs, setting a negative margin equal to the border-width.
Is there a reason you're using tables?
You can use the following CSS properties to make the border-added boxes behave like Internet Explorer, in that the border width will be calculated into the box model size:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
source: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-did-internet-explorer-get-the-box-model-right/
Related
When a certain user action is performed I need to add a row to a table which contains an <input> in each cell. I need the <input>s to automatically fill the available space without affecting the column width.
I need to start with this:
And end up with this:
But instead, when I insert the inputs every column stretches to a minimum of ~170px (depending on the browser):
Simplified demo: http://codepen.io/patik/pen/qZXMyL — Click the button at the bottom and note how the original column widths are not preserved once the inputs have been inserted.
I could read the column widths before inserting the inputs and then manually apply max-width to each input, however I want the column to remain fluid (that is, the columns should continue to adjust to fit the plain text data). Other rows may be added or removed to the table and I need the inputs to adjust accordingly.
As you'll see in the demo I've already tried creating a <td><div><input></div></td> structure in the hopes that the <div> would fill the column and the <input> would fill the <div>, but that doesn't seem to be the case.
I'd prefer a CSS solution (even if I need to apply inline styles when the inputs are inserted) but I'd be okay with a JavaScript solution if it's the only choice.
The <input>s must have a size attribute if you want to control their width with CSS:
<td><input size="1"></td>
The value of size doesn't matter (though it does need some value—you can't simply write <input size> and have it work). As long as the attribute is present the element seems to respect any CSS I apply to it. In this case, width: 100% does the trick.
Demo: http://codepen.io/patik/pen/JXrEGX
Try adding this to your CSS code:
input[type="text"] {
width: 100%;
box-sizing: border-box;
}
Meaning:
input[type="text"] Select only the input boxes of the type text.
width: 100% The width occupies 100% of the width available from the parent.
box-sizing: border-box Make the width also count the border.
http://codepen.io/anon/pen/xVLoYq
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.
I have a table inside a div with scrollbars.
There are some columns in the table with width defined. Till then table headers are fine.
But when I add more columns to grid the header test gets wrapped which i don't want, instead i want horizontal scroll to come.
Normal :
http://jsfiddle.net/hVRW7/
More Columns :
http://jsfiddle.net/hVRW7/1/
The quickest fix is to wrap <th>'s labels in spans, then give fixed width to them:
<table>
<thead>
<tr>
<th><span>Label1</span></th>
<th><span>Label2</span></th>
</tr>
</thead>
</table>
Then style as:
th span
{
display:inline-block;
width:300px; /* or what you wish */
}
EDIT see fiddle.
Your issue is that you have defined a limit of 1024px to the width of the table and then you are defining new columns with a total width that adds up to 1430px. All browsers are then trying to do their best to make the information fit within the defined width of 1024px. Since in your given example you are just repeatedly defining the same sets of columns are you sure you need all of them? If not you should narrow them down to only the ones needed and then determine your actual overall width. The defined width of the overall table will take precedence over individual widths in determining the maximum width of the table.
I'm using Twitter Bootstrap for my page layout and I want to insert a CSS3 Box Shadow in a column.
The only problem I'm having is that the box shadow has a 1px border, and this is enough to cause my second column to wrap to the next line. If I remove the border it aligns up fine.
If I subtract 2px from the column width, it looks exactly how I want. However, I'd like to take advantage of Bootstrap's fluid layout (which is based on percent rather than pixels), so there's no easy way to simply make the <div> 2 pixels narrower than whatever it would otherwise be.
I really dislike the way that borders do not stay within an item's width. Does anyone see a way to have my <div> respect the current width even with borders?
Use
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
and the border's width will be added inside the box.
Here is an example with two divs that have 100x100 sizes and 20px border. The first one has 'box-sizing', the second one has not : http://jsfiddle.net/y3zxC/ .
I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property table-layout. It can take three
values: auto, fixed, and inherit. The normal (initial) value is auto,
which means that the table width is given by its columns and any
borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as
wide as you have specified in the CSS. No more, no less. And to my
great surprise this seems to be widely supported by browsers. The only
browser of any significance that does not support it is IE/Mac, and
the significance of that browser is rapidly approaching zero.
Next is deciding what to do with the content that doesn’t fit in the
table anymore. If the table only contains text, word-wrap:break-word
(word-wrap is specified in the CSS3 Text Effects Module) will force
the browser to break words as necessary to prevent overflow.
You could set it inside its own div with overflow: scroll; so that it makes a scrollbar when the table expands too much...
Add the style display:table to the div tag. This causes the element to act like a table.
Give table width as 100% so that it will occupy div and wont cross it.
As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:
<table style="width:100%;table-layout:fixed">
check what box-sizing is set by default by the browser.
box-sizing: content-box; means:
The specified width and height apply
to the width and height respectively
of the content box of the element. The
padding and border of the element are
drawn outside this area.
box-sizing: border-box; means:
The specified width and height
determine the border box of the
element. Any padding or border
specified on the element is drawn
inside the remaining area. The content
box is computed by subtracting the
padding or border widths of the
respective sides from the specified
width and height.
it night just be a matter of changing the box-sizing value.
there's an article about it here: http://ie8demo.com/BoxSizing.aspx
Do you have a width set on the div? If so, it will stick to its width, allowing the table to overlap. Try removing the width and it will expand to its container's width. If you want thwe div to fit the table size, you can float it.
In addition to the first answer, make sure that the container element of the div has overflow: auto or scroll. The clearfix hack is helpful, too.