Как мне разложить TR в таблице?

Question

Как мне разложить TR в таблице?

0

Каков наилучший способ пропустить TR? Таким образом, существует разрыв между "@" и "m", поэтому он выглядит следующим образом:

@@@@     mmmmm

HTML:

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
<tbody>
<tr>@@@@@@@@@@@@@@@@@@@@@@</tr>
<tr>mmmmmmmmmmmmmmmmmmmmmm</tr>
</tbody>
</table>
</div>

CSS:

#aero {
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;
padding: 30px 30px 0px 30px;
min-height: 120px;
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}

Вот код:

http://jsfiddle.net/TGKa7/2/

ben_dchost 21 март 2014, в 16:53

Источник

1

Во-первых, вам нужны элементы <td> внутри ваших элементов <tr> . Во-вторых, вы можете использовать CSS для применения отступов или полей к указанным элементам <td> .
Dryden Long 21 март 2014, в 15:42
0

Что сказал Драйден?
michaelward82 21 март 2014, в 15:44
0

обновленная скрипка с правильной разметкой: jsfiddle.net/TGKa7/1
chris 21 март 2014, в 15:44

Показать ещё 1 комментарий

Теги:

html

css

5 ответов

Ещё вопросы

Во-первых, вам нужны элементы <td> внутри ваших элементов <tr> . Во-вторых, вы можете использовать CSS для применения отступов или полей к указанным элементам <td> .
обновленная скрипка с правильной разметкой: jsfiddle.net/TGKa7/1

Dryden Long · Answer 1 · 2014-03-21T14-01-00.000Z

Для начала ваша HTML-разметка неверна. Единственным допустимым дочерним элементом элемента <tr> является <td>. Это означает, что вы не можете иметь текст непосредственно внутри <tr>. Вам нужно будет изменить свою разметку на что-то вроде этого:

<table id="dedicatedserverstable" style='border: 1'>
  <tbody>
    <tr>
      <td>@@@@@@@@@@@@@@@@@@@@@@</td>
      <td>mmmmmmmmmmmmmmmmmmmmmm</td>
    </tr>
  </tbody>
</table>

Затем вы можете использовать CSS для применения дополнений между двумя ячейками таблицы следующим образом:

#dedicatedserverstable td {
  padding-right: 20px;
}

Вот скрипка: http://jsfiddle.net/e6DFT/

спасибо за ответ Я думаю, что это будет делать именно то, что мне нужно. Я проверю это вживую и вернусь к вам

Michael Durrant · Answer 2 · 2014-03-21T14-58-00.000Z

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

<style>
tr:nth-child(1) {height: 50px; vertical-align: top}
</style>
<table>
<tr>
<td>@@@@@</td>
</tr>
<tr>
<td>mmmmmm</td>
</tr>
<table>

sebastian · Answer 3 · 2014-03-21T14-45-00.000Z

Не знаю, что вы подразумеваете под пробелом, но, возможно, это помогает:

MARKUP:

<div id="aero">
    <table id="dedicatedserverstable" style='border: 1'>
        <tbody>
            <tr><td class = "first">@@@@@@@@@@@@@@@@@@@@@@</td></tr>
            <tr><td>mmmmmmmmmmmmmmmmmmmmmm</td></tr>
        </tbody>
    </table>
</div>

CSS:

#aero {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background:#F2F7FA;
    padding: 30px 30px 0px 30px;
    min-height: 120px;
    font: 12px Arial, Helvetica, sans-serif;
    -webkit-box-shadow: 0 0 5px #868686;
    box-shadow: 0 0 5px #868686;
    color: #666;
    border-collapse: collapse;
}
#aero td.first {
  padding-bottom: 20px;
}

http://jsfiddle.net/TGKa7/13/

И если вам нужен пробел в той же строке, используйте это:

http://jsfiddle.net/TGKa7/18/

Ficc · Answer 4 · 2014-03-21T14-38-00.000Z

Если вы хотите получить результат в той же строке, вы должны действительно создавать таблицы div(), таким образом, "@@@" будет отделен от "mmm". Что-то вроде этого:

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
    <tbody>
        <tr>
            <td>@@@@@@@@@@@@@@@@@@@@@@</td>
            <td>mmmmmmmmmmmmmmmmmmmmmm</td>
        </tr>
    </tbody>
</table>
</div>

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

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
    <tbody>
        <tr>
            <td>@@@@@@@@@@@@@@@@@@@@@@</td>
        </tr>
        <tr>
            <td>mmmmmmmmmmmmmmmmmmmmmm</td>
        </tr>
    </tbody>
</table>
</div>

Нет абсолютно никакой разницы между вашими фрагментами кода.
Вы абсолютно правы, исправили это сейчас. Благодарю. :)

andrew · Answer 5 · 2014-03-21T13-59-00.000Z

Вам нужно положить td внутри ваших строк таблицы, а также у вас есть слишком много закрытия tr тегов

  <tr><td>@@@@@@@@@@@@@@@@@@@@@@</td></tr>
  <tr><td>mmmmmmmmmmmmmmmmmmmmmm</td></tr>

http://jsfiddle.net/5fpVL/

спасибо за ответ Я исправил лишнюю опечатку. Но это все еще не создает разрыв между @ и m. Я хочу отображать как (выше только что добавил)