How to separate a table cell into two equal parts with different background via css?


Tags: html,css

Problem :

enter image description here

I have a 2x2 html table. In one of the fields of the table I have two subfields. Both of those subfields are supposed to take together the entire area of the table cell.

Is there a straightforward result to achieve this via CSS?



Solution :

Option One

Using divs you could separate a table cell without the need for a colspan.

display: inline-block and vertical-align: top can keep them in line.

Example!

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div></div><div></div>
        </td>
        <td></td>
    </tr>
</table>

CSS

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border: solid 2px #111;
}

td {
    width: 100px;
    height: 100px;
    background: #FFF;
    border: solid 2px #111;
}

td div {
    height: 100px;
    width: 50px;
    background: blue;
    display: inline-block;  
    vertical-align: top;
}

td div:first-child {
    background: green;
}

Option Two

Using a colspan.

Example with colspan

HTML

<table>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td class="test"></td>
        <td class="test"></td>
        <td></td>
    </tr>
</table>

CSS

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border: solid 2px #111;
}

td {
    height: 100px;
    background: #FFF;
    border: solid 2px #111;
    width: 50px;
}

tr td:last-child {
    width: 100px;
}

.test {
    background: blue;
}
.test:first-child {
    background: green;
}

    CSS Howto..

    How to make two separate, independent columns (using html and css)

    how to trigger a stored property with css color change?

    How to make hyperlink for a background image?

    How to get Owl Carousel Owl-Page (dots) Responsive

    How to extend a CSS/HTML content box to the bottom of browser/viewport window when other elements above it push it down?

    How to add hover class to jQuery click(function() accordian divs?

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How do I give a WordPress Custom Menu item an id or class for CSS targeting?

    How to align text in line with icons?

    How to center text in lists?

    How to keep all the parent except the first LI highlighted when the sub LI is hovered over

    How specify two css classes: from property and conditional class

    How to center field_with_errors class

    How to center text based on only one of two merged cells ? html/css

    How to apply a CSS class to all instances of a control in ASP.NET

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to apply css class for selected element in jquery or javascript?

    How to link my HTML file to my CSS file [closed]

    how to stop only the hover pointer event in css

    How to give line-break from css, without using
    ?

    How to set different column in table to be different width in css?

    How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?

    How to add new value to current css value [closed]

    How to stop active effect occurring on all sub menu options from navbar

    How to write CSS code without using :not selector?

    How to display image in sidebar-wrapper css class

    How do I make an image semi-transparent?

    How to specify image size in webview css using dip?

    How can I override an external css?

    How do i make a flexible div with a background in css