how to break a line or space in between two rows of the html table

前端 未结 7 1421
长情又很酷
长情又很酷 2021-01-18 06:38

I need to give space or break between two rows, so that my page will looks good.

if you look my code i had given many empty rows and column to make a space between t

相关标签:
7条回答
  • 2021-01-18 06:49

    According to the CSS box model:

    margin values do not apply to table rows and table cells
    See: http://www.w3.org/TR/CSS2/box.html#margin-properties

    padding and border values do not apply to table rows but apply to table cells
    See: http://www.w3.org/TR/CSS2/box.html#padding-properties

    A quick fix is to add padding to the top of the row that you want to separate.

    For example: http://jsfiddle.net/audetwebdesign/caXsZ/

    Sample HTML:

    <table cellpadding="0" cellspacing="0" border="0">
        <tr class="row1">
            <td>Row One - 1</td>
            <td>Row One - 2</td>
        </tr>
        <tr class="row2">
            <td>Row Two - 1</td>
            <td>Row Two - 2</td>
        </tr>    
    </table>
    

    CSS:

    td {
        border: 1px dotted blue;
    }
    tr.row2 td {
        padding-top: 40px;
    }
    

    If you want to style borders around your table cells, you may need to add wrappers around the content and apply borders depending on the design details.

    0 讨论(0)
  • 2021-01-18 06:49

    The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.

    <table cellpadding="4">
    

    or using css :

    <style type='text/css'>    
      table{ border-collapse: separate; }
      table td { border-spacing: 1em; }
    </style>
    
    0 讨论(0)
  • 2021-01-18 06:51

    Try this:

    <tr>
        <td>
            Row 1
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;
            <!--you just need a space in a row-->
        </td>
    </tr>
    <tr>
        <td>
            Row 2
        </td>
    </tr>
    
    0 讨论(0)
  • 2021-01-18 06:58

    Set the marginattribute for a <tr> tag:

    <tr style="margin-top:10px;"></tr>
    

    Or make the entire table with this style:

    <style>
        table tr {
            margin-top: 10px;
        } 
    
        table tr:first-child {
           margin-top: 0px; !important
        }
    </style>
    
    0 讨论(0)
  • 2021-01-18 07:05

    This can be achieved like this.

    <tr> <td> <br> </td> <!--The br tag did what i was looking for --> </tr>

    0 讨论(0)
  • 2021-01-18 07:08
    border spacing attribute has to be specified in CSS
    
    table
        {
        border-collapse:separate;
        border-spacing:10px 0px;
        }
    

    The above code set 10px spacing between the rows and 0px spacing between the columns

    0 讨论(0)
提交回复
热议问题