How to give border a single border for two adjacent cells in css


Tags: html,css,table

Problem :

I am making a form in html. And I am using a table for layout of my input controls and labels.

For each input of a form, there is one label associated with it.

I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.

I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.

Is there anyway to do it either in CSS or anything else ?

My HTML sample code :

<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>

Below is a screenshot of what I want to achieve.

enter image description here



Solution :

If you could apply classes to your td's you could try this:

<table cellspacing="0">
    <tr>
        <td class="label">Label1: </td>
        <td>input1</td>
        <td class="label">Label2: </td>
        <td>input2</td>
    </tr>
</table>​

With the following css:

table {
    background-color: silver;
    border-collapse: collapse;
}
td {
    padding: 5px;
    border: 1px solid red;
    border-width: 1px 1px 1px 0px;
}

td.label {
    border-width: 1px 0px 1px 1px;    
}

http://jsfiddle.net/H3p8e/2/


    CSS Howto..

    how to display a dropdown ul two per row

    How to wrap a div vertically and then horizontally

    How to only make the text of a link go down by 1px when active and not the whole line/paragraph?

    How to set min-height using css [closed]

    How to display Highcharts in rows (5)

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

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

    How to reapply new text format in CSS after removing format initially

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    How to set a different main content background for each page in weebly?

    How to recreate eBay New Logo Page in HTML + CSS

    How do I create a 3 nested stamina bar that will regenerate from last to first

    How to set a css style to the last item of CListView?

    How to get same cursor(hand) on links in all browser?

    IE11 dosen't show CSS-Content properly

    CSS - How to set gradient color background for different heights

    how do I select a single tag in the middle of many of the same in CSS?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    How to add Button over image using CSS?

    How do I specify IE 11 specific css file?

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How to use a defined property value as another property in pure CSS?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    How do I create tabs in vertical alignment?

    How do I remove a specific bullet point within a ul in CSS?

    How do you style an android app?

    How can I re-size Background Image to full Width of Window with CSS

    How to count the number of correct answers using Javascript?

    css: how to make
    not highlighted when selecting text (in Chrome)

    How to write a:hover in inline CSS?