it-swarm.com.ru

как разбить строку или пробел между двумя строками таблицы HTML

Мне нужно дать пробел или разрыв между двумя строками, чтобы моя страница выглядела хорошо.

если вы посмотрите мой код, я дал много пустых строк и столбцов, чтобы сделать пробел между двумя строками в таблице.

Пожалуйста, назовите любой другой правильный способ дать место между двумя рядами.

вот мой пример кода:

<form:form name="form" method="post" modelAttribute="Abatch">

 <table>
<tr>
    <td>Please enter your comments</td>
    <td><form:textarea id="textarea" style="width:150%;height:150%" path="Comments" size="255" readonly="false" /></td>
</tr>
<tr>
<tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tr>
</tr>
<tr>     
   <td><input id="button1"   type="submit" name="submit" value="Approve"/></td>
   <td><input id="button4"  type="submit" name="submit" value="Reject"/></td>

  </tr>
</table>
5
Yellow Flash

Согласно блочной модели CSS:

значения полей не применяются к строкам и ячейкам таблицы
См .: http://www.w3.org/TR/CSS2/box.html#margin-properties

значения отступов и границ не применяются к строкам таблицы, но применяются к ячейкам таблицы
См .: http://www.w3.org/TR/CSS2/box.html#padding-properties

Быстрое решение состоит в том, чтобы добавить отступ в верхней части строки, которую вы хотите отделить.

Например: http://jsfiddle.net/audetwebdesign/caXsZ/

Образец 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;
}

Если вы хотите стилизовать границы вокруг ячеек таблицы, вам может понадобиться добавить обертки вокруг содержимого и применить границы в зависимости от деталей дизайна.

8
Marc Audet

Попробуй это:

<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>
13
MJ33

Правильный способ дать интервал для таблиц - это использовать cellpadding и cellspacing, например.

<table cellpadding="4">

или используя CSS:

<style type='text/css'>    
  table{ border-collapse: separate; }
  table td { border-spacing: 1em; }
</style>
4
Charaf JRA
border spacing attribute has to be specified in CSS

table
    {
    border-collapse:separate;
    border-spacing:10px 0px;
    }

Приведенный выше код устанавливает интервал 10px между строками и интервал 0px между столбцами

4
Sudharsun

Установите атрибут margin для тега <tr>:

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

Или сделать всю таблицу с этим стилем:

<style>
    table tr {
        margin-top: 10px;
    } 

    table tr:first-child {
       margin-top: 0px; !important
    }
</style>
2
Gustavo Gondim

Это может быть достигнуто следующим образом. 

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

1
anand24

Для меня сработало решение: определить свойства css на уровне столбцов и определить colspan в качестве числа столбцов в таблице.

HTML -

<tr class="border_bottom">
    <td colspan="6"></td>
</tr>

CSS -

tr.border_bottom td {
    border-bottom: 1px solid #cccccc;
    color: #707070;
}

table{
    border-collapse: collapse;
}
0
Pukhraj soni