Пробелы между строками таблицы с границами в CSS - PullRequest
Новая
       40

Пробелы между строками таблицы с границами в CSS

5 голосов
/ 19 ноября 2011

Я пытаюсь отобразить таблицу, где каждая строка таблицы имеет округленную границу.Я ищу, чтобы добавить пробелы между этими границами, а не внутри самого ряда.Первоначально у меня была дополнительная строка <tr class='spacer'> между каждой строкой для их разнесения, но с тех пор я добавил функциональность сортировщика в мою таблицу с помощью плагина jQuery, Tablesorter.

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

Мне нужен способ пробела между каждой из этих строк и возможность сортировки таблицы.

// HTML Follows // 

<html>
<head> 
<link rel="stylesheet" type="text/css" href="table.css"/>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() { 
    $("table").tablesorter(); 
}); 
</script>

</head>

<body>

<table class="tablesorter" cellspacing=0>
<thead> 
    <tr>
    <th>Name</th>
    <th>Date</th>
    <th>Price</th>
</tr>
</thead>

<tbody>
<tr>
    <td class='roundleft'>Keanan</td>
    <td class='spacer'>01/11/11 6:52 AM</td>
    <td class='roundright'>$20.95</td>
</tr>

<tr>
    <td class='roundleft'>Conor</td>
    <td class='spacer'>01/11/11 4:52 PM</td>
    <td class='roundright'>$200.00</td>
</tr>

<tr>
    <td class='roundleft'>Ryan</td>
    <td class='spacer'>01/11/11 12:52 PM</td>
    <td class='roundright'>$1.00</td>
</tr>

</tbody>    
</table>

</body>
</html>

// CSS следует // 

body { 
  text-align:center
  margin:50px 0px; 
  padding:0px;
  font-family: "Open Sans";
}

#content {
  font-weight:normal;
  background: #009900;
  width:700px;
  margin:0px auto;
  color:white;
  border:2px solid  #000000;
  border-radius: 15px;
}

table{
  margin-left: auto;
  margin-right:auto;
  font-size: 12pt;
  color: black;
  border: 3px black solid;
  border-radius: 15px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #009900;
}

th{
  text-align: center;
  color: white;
  padding-right: 15px;
  padding-left:10px;
  padding-bottom: 5px;
  font-size: 16pt;
  font-weight: normal;
  background-color: #009900;
}

tr{
  border-collapse: collapse;
  height: 80px;
  background-color: #FFFFFF;
}


td {
  padding-left:0px;
  padding-right: 0px;
  padding-bottom: 5px;
  text-align: center;
  border-top: solid 1px black;
  border-bottom: solid 2px black;
  border-image: url(./borders/bottom.jpg);
}

td.spacer{
  padding-right: 20px;
}

td.roundleft{
  border-left: 1px solid;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  -moz-border-radius-topleft:15px; /* Firefox top left corner */
  -moz-border-radius-bottomleft:15px; /* Firefox bottom left corner */
}

td.roundright{
  -moz-border-radius-topright:15px; /* Firefox top right corner */
  -moz-border-radius-bottomright:15px; /* Firefox bottom right corner */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-right: 2px solid;
}

Ответы [ 2 ]

1 голос
/ 19 ноября 2011

enter image description here Насколько мне известно, нет никакого способа добавить поля между двумя строками, однако вы можете получить желаемый результат, добавив div для ваших и

Я сделал css и html, которые вы найдете здесь.

HTML-код: http://snipt.org/kyR3

Код CSS: http://snipt.org/kyP4

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

Вот результат ....

0 голосов
/ 19 ноября 2011

Существует очень хороший вопрос о STackoverflow, который говорит о том, как мы можем добиться заполнения ячеек и межэлементного интервала с помощью CSS

. См. Настройка ячеек и ячеек в CSS?

Надеюсь, это решит вашу проблему

...