www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML CSS Only border <td>

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    HTML CSS Only border <td>

    I want to have only one cell with a border (B2). I dont want to use a table inside a table.
    Code:
    <table border="0">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>  <!-- Only this cell should have a border -->
            <td>C2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
    </table>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    Try:
    Code:
    table tr:nth-child(2) td:nth-child(2) { border:solid 1px #000; }
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I don't know the purpose or reason for the border, but I would just add the style directly (or use a class).
    HTML Code:
    <table border="0">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td style="border: 1px solid #5B5;">B2</td>  <!-- Only this cell should have a border -->
            <td>C2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
    </table>
    I also feel I should mention that adding a border to 1 cell actually affects the spacing of other cells (as borders increase the outer size of an element). You could alternatively use the 'outline' property instead of 'border' if you wanted to give a border effect without altering the spacing/size of anything in the table.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles