css-tables

I have a dynamic table that I generate after getting some inputs from the user to present some tabular data. I need to know if there is away to assign a fixed height for the cells even if some of them have some content / text. I would like all the cells to have 30px height regardless if they have content or if they are empty. This is the CSS I have: table { width: 90%; height:100%; } table th, table td { border: 1px solid gray; height:30px !important; padding: 9px !important; width: 16%; } The table is generated by this code: foreach ( $this->rows as $i => $row ) { $tbody_tr = NHtml::el ('tr

I have applied CSS border-bottom:1px dashed #494949; on several consecutive cells of a single row of an HTML table, but the border is not uniform. The dashes at the end of each cell appear little longer. Dotted border is also not uniform. I am also using border-collapse:collapse; Here is the screenshot: Is there any way I can get uniform dashed border? Browsers have oddities in rendering dashed borders. You can fight against them by removing cell spacing and cell padding and setting the border on a tr element and not on cells, e.g. table { border-collapse: collapse; } td { padding: 0; } tr {

Given markup like this: <div class="a">A</div> <div class="b">B</div> <div class="a">A</div> <div class="b">B</div> <div class="a">A</div> <div class="b">B</div> Is it possible to style this document to look like this: |-------|---------| | | | | A | B | | | | |-------|---------| | | | | A | B | | | | |-------|---------| | | | | A | B | | | | |-------|---------| (and if the content in A or B is longer, its neighbor will grow to match its height)… without any additional markup? I understand that giving .a and .b a display value of table-cell would just make this one big row. What’s the solution

I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it doesn't play nice with :hover in webkit. http://jsfiddle.net/S9pkM/2/ Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red. table { border-collapse: collapse; } /*I am aware of separate */ table td { border: 3px solid black; } table tr:hover td { border-top-color: red; border-bottom-color: red; } table tr:hover td:first-child {

I have a table that sits within a parent div full of body text and other content. I have the following CSS which does not seem to work: table {width:100%; padding: 0 50px 0 50px;} When I use margins instead of padding, it works—however, with width:100%, using margins scoots the whole thing out of the parent div. I guess I could reduce the width or specify an exact pixel amount, but the rest of the site scales with screen size and I'd like this to work like that, too. There are some special properties related to tables. The one you are looking for is border-spacing . table { width: 100%; border

I like to get my table behave like a block element. I cannot set it to width:100% because it does have some padding, this is going to result 100% + the paddings PX. Check out: http://jsfiddle.net/LScqQ Finally the table does what I want, can you see the box-shadow? But the table children don't like it that way^^ I guess the TH inside the THEAD are the problem. They do not get the aspected ratio of 66% to 33%. Help wanted... Your table should be display: table . If you're worried about the sizing, use box-sizing: content-box . The reason is that display: table creates the table layout mechanism

I'm trying to get the text to be on the right side and vertically center aligned with the image. How can I do that? My current code: <div style="display: table;"> <div style="display: table-cell;"><img src="//dummyimage.com/100"></div> <div style="display: table-cell;">text</div> </div> use CSS3 Flexible Box Layout : from the documentation: providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement