css-tables

I have a CSS table and I would like to have space in-between the cells but not at the left of the first image and the right of the last image. Here is a screenshot of what I have: Here is a screenshot of what I would like: The current HTML is: <div id="footer"> <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div> <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div> <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div> <div class="lower"><img src="images/four.jpg" alt="The rings"/></div> </div> and the CSS is #footer {

For an application I am working on I need equal height columns. I chose to use CSS to style my column items as table's. In this way the height of each columns is indeed the maximum among column heights. See an example here: http://jsfiddle.net/roelvd/GXe9m/ Now the height of each column is indeed 100% in each browser. The element (.container in my case) directly in each column should however also be 100% . This works fine in both Firefox and Chrome; but does not in IE10 (and most likely older ID versions). HTML: <div id="wrapper" class="table"> <div class="row"> <div class="column" style=

I have tried a number of CSS style settings, but can't seem to get it working, I either get the text to wrap or increase the size of the column. I have tried setting table-layout to fixed table { table-layout:fixed; } Have tried various different combinations for the column. Name { width: 100px; overflow:hidden; white-space:nowrap; } Set a width on the entire table as well. The width can be set as a percentage, in pixels, or in other units. You might think that it suffices to set the width of each column, or the width of each cell in the first row, but for some odd reason it doesn’t. Fixed

I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item. I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part. I'm wondering if I can use just divs? Now my CSS foo is lacking, and I tried to copy

I'm trying to style a sort of command bar. It must work in IE9, so flexbox is out. Instead, I'm using a display:table layout. The first snippet (using <span> s) is how I'd like it to look. The second snippet is the proper HTML, and it isn't styled right. The elements are not laid out correctly, which pushes the second button down a line, and the borders do not collapse. Is there any way to fix this without wrapping the buttons? If I did that, I'd have to undo and redo a lot of styles in order to put the border on the wrapper. If all else fails, I suppose I can replace <button> with <span role=

I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page - http://www.designlagoon.com/what-we-do/ There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix. If anyone can shed some light on what might be causing the problem I'd really appreciate it! ptriek This is related to a question I posted yesterday: Firefox: wrong interpretation of box

I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom. Unfortunately, as far as I can tell , display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed. I've tried treating them as rows instead , but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular div s with their widths set to 100% . Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid

I need to use a grid layout but also need a horizontal line separating each row. The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .box { border-bottom: 2px solid #ffa94d; padding: 1em; } <div class="wrapper"> <div class="box">One</div> <div class="box">Two</div> <div class="box">Three</div> <div class="box">Four</div> </div> Is there a way to fix the above so that the entire row has a border? Add a grid