In **Visual Studio**, I&#39;m seeing these warnings:

&gt; - Validation (HTML 5): Attribute &#39;cellpadding&#39; is not a valid attribute of element &#39;table&#39;.
&gt; - Validation (HTML 5): Attribute &#39;cellspacing&#39; is not a valid attribute of element &#39;table&#39;.
&gt; - Validation (HTML 5): Attribute &#39;valign&#39; is not a valid attribute of element &#39;td&#39;.
&gt; - Validation (HTML 5): Attribute &#39;align&#39; is not a valid attribute of element &#39;td&#39;.

If they are not valid attributes in **HTML5**, what replaces them in CSS?

What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?

I want to have two items on the same line using `float: left` for the item on the left.

I have no problems achieving this alone. The problem is, I want the two items to **stay** on the same line *even when you resize the browser very small*. You know... like how it was with tables.

The goal is to keep the item on the right from wrapping *no matter what*.

How to I tell the browser using CSS that I would rather **stretch the containing `div`** than wrap it so the the `float: right;` div is below the `float: left;` `div`?

what I want:

                                       \
     +---------------+  +------------------------/
     | float: left;  |  | float: right;          \
     |               |  |                        /
     |               |  |content stretching      \   Screen Edge
     |               |  |the div off the screen  /  &lt;---
     +---------------+  +------------------------\
                                                 /

How do I keep CSS floats in one line?

Is it possible in CSS using a property inside an @page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?

Repeat table headers in print mode

I&#39;m trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I&#39;m not really supposed to use tables for layout but I don&#39;t know enough CSS to completely replace it yet.

Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I&#39;d like to put a simple border around parts of the table. Currently, I&#39;m using 4 separate CSS classes (top, bottom, left, right) that I attach to the `&lt;td&gt;` cells that are along the top, bottom, left, and right of the table respectively.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .top {
      border-top: thin solid;
      border-color: black;
    }

    .bottom {
      border-bottom: thin solid;
      border-color: black;
    }

    .left {
      border-left: thin solid;
      border-color: black;
    }

    .right {
      border-right: thin solid;
      border-color: black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html&gt;

    &lt;body&gt;

      &lt;table cellspacing=&quot;0&quot;&gt;
        &lt;tr&gt;
          &lt;td&gt;no border&lt;/td&gt;
          &lt;td&gt;no border here either&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;top left&quot;&gt;one&lt;/td&gt;
          &lt;td class=&quot;top right&quot;&gt;two&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;bottom left&quot;&gt;three&lt;/td&gt;
          &lt;td class=&quot;bottom right&quot;&gt;four&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan=&quot;2&quot;&gt;once again no borders&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;top bottom left right&quot; colspan=&quot;2&quot;&gt;hello&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan=&quot;2&quot;&gt;world&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

Is there any easier way to do what I want? I tried applying top and bottom to a `&lt;tr&gt;` but it didn&#39;t work. (p.s. I&#39;m new to CSS, so there&#39;s probably a really basic solution to this that I&#39;ve missed.)

**note:** I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.

Border around specific rows in a table?

I have a table with many rows on my page. I would like to set table&#39;s height, say for 500px, such that if the height of the table is bigger than that, a vertical scroll bar will appear. I tried to use CSS `height` attribute on the `table`, but it doesn&#39;t work.

How to specify table&#39;s height such that a vertical scroll bar appears?

In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I&#39;ve tried applying &quot;margin-right: 10px;&quot; to each of the cells on the left hand side, but to no effect.

CSS Cell Margin

I normally use CSS rules for `margin:0 auto` along with a 960 container for my standard browser based content, but I&#39;m  new to HTML email creation and I&#39;ve got the following design that I&#39;d like to now center in the browser window without standard CSS.

[http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html][1]

I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to `width:100%` and using some inline style for `text-align:center` on the tbody or something like this to do it?

Is there a best practice for this?


  [1]: http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

What&#39;s the best way to center your HTML email content in the browser window (or email client preview pane)?

I have here two divs:

    &lt;div style=&quot;display:table-cell&quot; id=&quot;div1&quot;&gt;
        content
    &lt;/div&gt;

    &lt;div style=&quot;display:table-cell&quot; id=&quot;div2&quot;&gt;
        content
    &lt;/div&gt;

Is there a way to make space between these two divs (that have `display:table-cell`)?


space between divs - display table-cell

I want to show a table of fixed width at the center of browser window. Now I use

    &lt;table width=&quot;200&quot; align=&quot;center&quot;&gt; 

But Visual Studio 2008 gives warning on this line:

*Attribute &#39;align&#39; is considered outdated. A newer construct is recommended.*

What CSS style should I apply to the table to obtain the same layout?


CSS way to horizontally align table

I have a dynamic table in my web page that sometimes contains lots of rows. I know there are `page-break-before` and `page-break-after` CSS properties. 
Where do I put them in my code in order to force page breaking if needed?

How to apply CSS page-break to print a table with lots of rows?

Given the following HTML and CSS, I see absolutely nothing in my browser (Chrome and IE latest at time of writing). Everything collapses down to 0x0 px. Why?

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            section { display: table; height: 100%; background-color: grey; }
            
            #colLeft { display: table-column; height: 100%; background-color: green; }
            #colRight { display: table-column; height: 100%; background-color: red; }
            
            #row1 { display: table-row; height: 100%; }
            #row2 { display: table-row; height: 100%; }
            #row3 { display: table-row; height: 100%; }
            
            #cell1 { display: table-cell; height: 100%; }
            #cell2 { display: table-cell; height: 100%; }
            #cell3 { display: table-cell; height: 100%; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;section&gt;
            &lt;div id=&quot;colLeft&quot;&gt;
                &lt;div id=&quot;row1&quot;&gt;
                    &lt;div id=&quot;cell1&quot;&gt;
                        AAA
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div id=&quot;row2&quot;&gt;
                    &lt;div id=&quot;cell2&quot;&gt;
                        BBB
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id=&quot;colRight&quot;&gt;
                &lt;div id=&quot;row3&quot;&gt;
                    &lt;div id=&quot;cell3&quot;&gt;
                        CCC
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/body&gt;
    &lt;/html&gt;



How is a CSS &quot;display: table-column&quot; supposed to work?

One of the columns in my table can contain a long text without whitespaces. How can I limit its width to, say, 150px? I don&#39;t want it to be 150px always (if it&#39;s empty it should be narrow), but if there is a long text I want it to be limited with 150px and the text to be wrapped.

Here is a test example: http://jsfiddle.net/Kh378/ (let&#39;s limit the 3rd column).

Thank you in advance.

**Update:**  
Setting this styles:

    word-wrap: break-word;
    max-width: 150px;
does not work in IE8 (tested on different computers) and I suppose it does not work in any version of IE.

How can I limit table column width?

    &lt;html&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .table   { display: table;}
            .tablerow  { display: table-row; border:1px solid black;}
            .tablecell { display: table-cell; }
        &lt;/style&gt;
        &lt;div class=&quot;table&quot;&gt;
            &lt;div class=&quot;tablerow&quot;&gt;
                &lt;div class=&quot;tablecell&quot;&gt;Hello&lt;/div&gt;
                &lt;div class=&quot;tablecell&quot;&gt;world&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;tablerow&quot;&gt;
                &lt;div class=&quot;tablecell&quot;&gt;foo&lt;/div&gt;
                &lt;div class=&quot;tablecell&quot;&gt;bar&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/html&gt;


According to my understanding, a black border should be drawn on each of the rows which I&#39;ve specified via tablerow class. But the border doesn&#39;t come up.


And I wanted to change the height of a row. If I specify it with &#39;px&#39; -- it works. But, if I give it with a % -- won&#39;t work.I tried the following 


    .tablerow  { 
        display: table-row;
        border:1px solid black;
        position: relative; //not affecting anything and the border disappears!! 
        //position: absolute; // if this is set,the rows overlaps and the border works
        height: 40%; // works only if specified in px and not in %
    }


Something is going wrong somewhere, but I am not able to understand where. Please help!

css display:table not displaying the border

I&#39;m trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this.

I tried setting `td` margins but it seems to have no effect.
```css
table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}
```

If I do the same thing with `padding`, it works, but then I don&#39;t have the spacing between cells.

Could someone help me with this?


jsFiddle: http://jsfiddle.net/BfBSM/


Controlling Spacing Between Table Cells

Here is 2 column markup using `display: table` and `display: table-cell` CSS declarations:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .table {
      display: table;
    }

    .cell {
      border: 2px solid black;
      vertical-align: top;
      display: table-cell;
    }

    .container {
      height: 100%;
      border: 2px solid green;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;p&gt;Text
          &lt;p&gt;Text
            &lt;p&gt;Text
              &lt;p&gt;Text
                &lt;p&gt;Text
                  &lt;p&gt;Text
                    &lt;p&gt;Text
                      &lt;p&gt;Text
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;Text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

But `.container` block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.

**What I have** | **What I need**

![What I have][1] ![What I need][2]

Please, do not propose JS solution.

  [1]: http://i.stack.imgur.com/qM376.png
  [2]: http://i.stack.imgur.com/nXru1.png

height: 100% for &lt;div&gt; inside &lt;div&gt; with display: table-cell

i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.

example: 

	&lt;table id=&quot;myTable&quot; cellspacing=&quot;5&quot;&gt;
		&lt;colgroup id=&quot;names&quot;&gt;&lt;/colgroup&gt;
		&lt;colgroup id=&quot;col20&quot; class=&quot;datacol&quot;&gt;&lt;/colgroup&gt;
		&lt;colgroup id=&quot;col19&quot; class=&quot;datacol&quot;&gt;&lt;/colgroup&gt;
		&lt;colgroup id=&quot;col18&quot; class=&quot;datacol&quot;&gt;&lt;/colgroup&gt;
		
		&lt;thead&gt;
			&lt;th&gt;&amp;nbsp;&lt;/th&gt;
			&lt;th&gt;20&lt;/th&gt;
			&lt;th&gt;19&lt;/th&gt;
			&lt;th&gt;18&lt;/th&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td&gt;&amp;nbsp;&lt;/td&gt;
				&lt;td&gt;&amp;nbsp;&lt;/td&gt;
				&lt;td&gt;&amp;nbsp;&lt;/td&gt;
				&lt;td&gt;&amp;nbsp;&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;

CSS:


    #names {
    	width: 200px;
    }
    
    #myTable .datacol {
    	text-align: center;
    	background-color: red;
    }




using text-align center in colgroup

The Design
==========

The info widgets content should be vertically aligned in the middle as such:

![Original PSD Design][1]

----------

The Coded Design
==========

### Windows: Chrome 20 / FF 14 / IE 9
![Windows Coded Design][2]

### Mac (Lion / Mt. Lion): Chrome / FF
![Mac Coded Design][3]

----------

The Code
========

### HTML
    &lt;div class=&quot;info&quot;&gt;
        &lt;div class=&quot;weather display clearfix&quot;&gt;
            &lt;div class=&quot;icon&quot;&gt;&lt;img src=&quot;imgs/icons/thunderstorms.png&quot; align=&quot;Thunderstorms&quot; /&gt;&lt;/div&gt;

            &lt;div class=&quot;fl&quot;&gt;
                &lt;p class=&quot;temperature&quot;&gt;82&amp;deg; / 89&amp;deg;&lt;/p&gt;
                &lt;p class=&quot;conditions&quot;&gt;Thunderstorms&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;time display&quot;&gt;
            &lt;p&gt;11:59 &lt;span&gt;AM&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;date display clearfix&quot;&gt;
            &lt;p class=&quot;number fl&quot;&gt;23&lt;/p&gt;
            &lt;p class=&quot;month-day fl&quot;&gt;Jun &lt;br /&gt;Sat&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- //.info --&gt;

### CSS

    .info {
        display:table;
        border-spacing:20px 0;
        margin-right:-20px;
        padding:6px 0 0;
    }
        .display {
            background-color:rgba(255, 255, 255, .2);
            border-radius:10px;
            -ms-border-radius:10px;
            color:#fff;
            font-family:&quot;Cutive&quot;, Arial, sans-serif;
            display:table-cell;
            height:70px;
            vertical-align:middle;
            padding:3px 15px 0;
        }
            .display p {padding:0;line-height:1em;}
            .time, .date {padding-top:5px;}
                .time p, .date .number {font-size:35px;}
                .time span, .display .month-day, .conditions {
                    font-size:14px;
                    text-transform:uppercase;
                    font-family:&quot;Maven Pro&quot;, Arial, sans-serif;
                    line-height:1.15em;
                    font-weight:500;
                }
                .display .month-day {padding-left:5px;}
                .icon {float:left;padding:0 12px 0 0}
                .display .temperature {font-size:24px;padding:4px 0 0;}
                .display .conditions {text-transform:none;padding:2px 0 0;}
        .lt-ie9 .display { /* IE rgba Fallback */
            background:transparent;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
            zoom:1;
        } 

----------


The Issue
=========
Looking at the above images of the coded design you can see how the appears to throw off the alignment. Upon further viewing, the text is being rendered outside of the element on the mac.

### Windows
![Windows Coded Design Alignment][4]

### Mac
![Mac Coded Design Alignment][5]

----------

Note
=========

I am embedding the fonts through a Google Web Fonts stylesheet.

----------

Tested
======
I have tried the following:

 - Set line-heights on every element.
 - Set font-weights on every element.
 - Set heights on every element.
 - A combination of height/padding-top on every element.
 - Used percentages/em/px for padding.

It seems that no matter what I try, the content will never center align perfectly across mac and pc.

----------


My Question(s)
===========

It is possible to achieve what I&#39;m trying to do in a simplistic manner?

Should I forgo the `display:table-cell;` route and set specific heights/paddings on each element and child? I will still run into padding/spacing issues between the two OS&#39;s.

What should I categorize this issue under? Line-height? Table-cells? OS? etc...


**Thanks in advance!**


  [1]: http://i.stack.imgur.com/BY9V7.png
  [2]: http://i.stack.imgur.com/lXnmD.png
  [3]: http://i.stack.imgur.com/DdhkE.png
  [4]: http://i.stack.imgur.com/IgfG7.png
  [5]: http://i.stack.imgur.com/sp56Z.png

Font Rendering / Line-Height Issue on Mac/PC (outside of element)

How do I make the background change of a table row in `Bootstrap 3` on hover. The table class I am using right now is `table table-striped`. I tried to add a extra class to the `&lt;tr&gt;` tags within the table and made the css like this `.table-row:hover{background:black;}`. Now only the non-striped rows are working. Isn&#39;t there a class in bootstrap that will allow me to easily implement this? Or should I use `JQuery` to fix this? I really cannot figure this one out by myself.

Bootstrap table row hover

The following code displays correctly in Chrome or IE (the image is 200px wide).  In Firefox and Opera the `max-width` style is ignored completely.  Why does this happen and is there a good work around?  Also, which way is most standards compliant?

###Note
One possible work around for this particular situation is to set `max-width` to `200px`.  However, this is a rather contrived example.  I&#39;m looking for a strategy for a variable width container.

    &lt;!doctype html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            div { display: table-cell; padding: 15px; width: 200px; }
            div img { max-width: 100%; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;img src=&quot;http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg&quot; /&gt;
            &lt;p&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
                ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
                at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                leo metus, aliquam eget convallis eget, molestie at massa.
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

###[Update]
As stated by [mVChr](https://stackoverflow.com/users/246616/mvchr) below, the [w3.org spec](http://www.w3.org/TR/CSS2/) states that `max-width` does not apply to `inline` elements.  I&#39;ve tried using `div img { max-width: 100%; display: block; }`, but it does not seem to correct the issue.

###[Update]
I still have no solution for this issue.  However, I am using the following javascript hack to fix my problems.  Essentially, it recreates the situation above and checks if the browser supports `max-width` within `display: table-cell`.  (Using a data uri prevents an extra http request.  The one below is a 3x3 bmp.)

    jQuery( function ( $ ) {
    
        var img = $( &quot;&lt;img style=&#39;max-width:100%&#39; src=&#39;&quot; +
        &quot;data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA&quot; +
        &quot;AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//&quot; +
        &quot;/wAAAAAAwAAAAKAAAAA%3D&quot; +
        &quot;&#39;&gt;&quot; )
        .appendTo(
            $( &quot;&lt;div style=&#39;display:table-cell;width:1px;&#39;&gt;&lt;/div&gt;&quot; )
            .appendTo( &quot;body&quot; )
        );
        $.support.tableCellMaxWidth = img.width() == 1;
        img.parent().remove();
    
    });

Why do Firefox and Opera ignore max-width inside of display: table-cell?

I&#39;m trying to vertically and horizontally center some content overlaying an image slide (flexslider).  There were some similar questions to this one, but I couldn&#39;t find a satisfactory solution that applied directly to my specific problem.  Because of the limitations of FlexSlider, I cannot use `position: absolute;` on the img tag in my implementation.

I almost have workaround below working. The only problem is I cannot get the width &amp; height declarations to work on `inner-wrapper` div with the `display: table-cell` property.  

Is this standard behavior, or am I missing something with my code?  If it&#39;s standard behavior, what&#39;s the best solution to my problem?

**HTML**

    &lt;ul&gt;
        &lt;li&gt;
            &lt;img src=&quot;#&quot;&gt;
            &lt;div class=&quot;outer-wrapper&quot;&gt;
                &lt;div class=&quot;inner-wrapper&quot;&gt;
                    &lt;h1&gt;My Title&lt;/h1&gt;
                    &lt;h5&gt;Subtitle&lt;/h5&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

**CSS**

    html, body {
        margin: 0; padding: 0;
        width: 100%; height: 100%;
    }
    
    ul {
        background: #CCC;
        height: 100%;
        width: 100%;
        list-style-position: outside;
        margin: 0; padding: 0;
    }
    
    li {
        width: 100%;
        display: table;
    }
    
    img {
        width: 100%;
        height: 410px;
    }
    
    .outer-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        margin: 0; padding: 0;
    }
    
    .inner-wrapper {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 100%;
        height: 100%;
    }

Note: the centered content will be more than 1 element, so I can&#39;t use the line-height trick.

[jsFiddle][1].

  [1]: http://jsfiddle.net/timshutes/5pAA3/1/

Why is width: 100% not working on div {display: table-cell}?

I&#39;m using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, the table would overflow its parent div and create ugly overlapping with its sibling table. 

I played around with it and I think the problem has to do with the text being unspaced. I created a [jsfiddle][1] that demonstrates what I mean.

As you can see, the top leftmost table is well behaved and simply grows vertically to accommodate more text. However, the bottom left table leads to an overflow on the right due to the long unspaced text and the right column of the bottom left table winds up &quot;under&quot; its sibling. 

Does anyone have any tips on how I can fix this so that the very long text gets clipped or partially split onto a new line? ` `

  [1]: http://jsfiddle.net/skhFC/2/

Bootstrap tables overflowing with long unspaced text

I&#39;ve been put in a position where I need to use the display:table-cell command for div elements.

However I&#39;ve discovered that the &quot;cells&quot; will only work correctly if a percentage is added to the width.

In this fiddle http://jsfiddle.net/NvTdw/ when I remove the percentage width the cells do not have equal widths, however when a percentage value is added to the width all is well, but only when that percentage is equal to the proportion of max no of divs, so for four columns 25%, five 20% and in this case five at 16.666%.

I thought maybe adding a percentage of less - say 1% would be a good fix all, but the cells fall out of line again.

Why is this?

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

        .table {
          display: table;
          height: 200px;
          width: 100%;
        }

        .cell {
          display: table-cell;
          height: 100%;
          padding: 10px;
          width: 16.666%;
        }

        .grey {
          background-color: #666;
          height: 100%;
          text-align: center;
          font-size: 48px;
          color: #fff;
          font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
          font-weight: 300;
        }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block one&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block two&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block three&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block two&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block one&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block two&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block three&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block four&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;x&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;xx&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;xxx&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;xxxx&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;xxxxxx&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block five test&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;table&quot;&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block two&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;cell&quot;&gt;
        &lt;div class=&quot;grey&quot;&gt;Block three&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;



css display table cell requires percentage width

I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.

The problem is the following: The tables should have a fixed height and display either white space at the bottom (when there is too little content) or a vertical scrollbar (when there is too much). Add to this that the tables have a header which should not scroll.

As far as I know, the `thead` not scrolling is the default behaviour for tables. And a stretching `tfoot` could serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried

    table {
        height: 600px;
        overflow: scroll;
    }

I have tried with `max-height`. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the `tbody` too. Fact is, **the table always stays exactly the same height as its content**, regardless of my efforts.

Of course I could fake a table with a div structure, but it actually **is** a table, and I fear using divs I may run into an issue where some columns may not be properly aligned.

&gt; How am I supposed to give a table a height?

Setting a max height on a table

I have a site with a **very** active background (I&#39;m talking 6 or so different z-indexes here 2 with animations). I wanted a &lt;div&gt; in the foreground that had content but wanted a &quot;window&quot; through to the background in it. Some problems I had:

 1. you can&#39;t &quot;punch a hole&quot; in a background, so...

 - I built a containing div, lets call it &quot;srminfo&quot;
 - Inside that I had a &quot;top&quot;, &quot;left&quot;, &quot;window&quot;, &quot;right&quot; and &quot;bottom&quot;
 - the top, left, right, bottom all had opaque white backgrounds
 - while the srminfo and window divs had background:none;

 2. No matter how hard I tried, the &quot;right&quot; div wouldn&#39;t fill the space between the &quot;top&quot; and &quot;bottom&quot; divs, I tried a lot of different things. The reason it had to be dynamic is that the text in the &quot;left&quot; div was dynamic based on the background colour, which was itself generated randomly with JavaScript.

How is display: table; and all the other related CSS code like tables? And how can it be used?

How (and why) to use display: table-cell (CSS)

Is there a simple way to set the text alignment of all cells in the second column to `right`?

Or is the only way is to set the alignment for each cell in the column?

(Unfortunately, the `align` attribute of the `col` tag is not supported in Firefox.)

All Css Tables Solutions on Gang of Coders

Total of 25 Css Tables Solutions