Html таблицы граница: Отображение границ таблицы html-страницы – Учебник CSS 3. Статья «Работа с таблицами в CSS»

Как вы можете видеть здесь: http://jsfiddle.net/vpHW5 / правая и левая границы появляются поверх верхней границы. Как мне это исправить? Вот код css: div { background:#e8e3dd; border-right:1px solid…

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

Я использую bootstrap 2.3 версии и некоторые пользовательские стили CSS. У меня возникла следующая проблема: когда я пытаюсь добавить правую границу к последнему td в строке, он не отображается. Но…

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

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

У меня проблема с границами CSS(3). Я пытаюсь преобразовать текстовое поле ввода, придав ему U-образные границы. Левая и правая границы должны иметь 50% высоты. Это означает, что верхняя левая,…

Я создаю меню с 4 различными цветовыми границами. При просмотре в Safari 5 левая и правая границы идут сверху вниз без углов вокруг коробки. При просмотре в FF 4 существует угол границы в элементах…

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

Я работал на своем бизнес-сайте, в течение прошлой недели, и вчера я попал в проблему, которую я не могу найти решение. http://multisupport.dk / Как вы можете видеть, левая граница отличается от…

У меня есть ячейка таблицы и прямо сейчас у меня есть: #myCell { border-top: 1px solid brown; } и я хотел посмотреть, есть ли в любом случае несколько цветов, разбитых на проценты. Например, что-то,…

Как изменить границы таблицы style/size/color в HTML

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

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

Может ли кто-нибудь дать мне подсказку, как сделать эту таблицу в .html ? Какой код таблицы должен выглядеть в notepad doc ? Я полностью теряюсь в них: расстояние между ячейками=»0″ заполнение ячеек=»4″,… (и так до сих пор и так далее).

Может быть, просто не невозможно создать эту таблицу в html ?

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

Поделиться Источник Avdryz     29 октября 2013 в 23:55

3 Ответа

1

Вы можете стилизовать каждую ячейку. Например:

<table border="1">
    <tr>
        <th>Day</th>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td>Speed</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>200</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

В таблице выше я добавил некоторые классы CSS в строки:

.border-top-blue {
  border-top: 2px solid blue;
}

.bg-red {
  background-color: red;
}

.bg-yellow {
  background-color: yellow;
}

.border-dotted {
  border: 1px dotted;
}

Таким образом, вы можете изменить границу, цвет фона, размер и т.д. Надеюсь, вы поймете, в чем дело!

Поделиться cortex     30 октября 2013 в 00:11

1

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

http://jsfiddle.net/yen9ritch/8vsE4/

HTML

    <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>DAY</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Speed</td>
    <td>1.20kb/h</td>
    <td>1.00kb/h</td>
  </tr>
  <tr>
    <td>Total</td>
    <td>200</td>
    <td>220</td>
  </tr>
</table>

CSS

    #sampleTable {
    text-align:center;
}
.graybg-blackborder {
    background: #ccc;
    border-left: 2px #000 solid;
    border-right: 2px #000 solid;
    border-top: 1px #000 solid;
    border-bottom: 2px #000 solid;
    font-weight: bold;
}
.redbg-blackborder {
    background: red;
    border-left: 2px #000 solid;
    border-right: 2px #000 solid;
    border-top: 1px #000 solid;
    border-bottom: 2px #000 solid;
    font-weight: bold;
}
.dottedBottomBorder {
    border-bottom: #000 1px dotted;
}
.rightThinBorder {
    border-right: 1px #000 solid;
}
.yellowBg {
    background-color: yellow;
}
.thickBottom {
    border-bottom: 2px #000 solid;
}

Поделиться Yen Howell     30 октября 2013 в 00:19

0

вы можете использовать это в файле html

<tr>
    <td class = "class1>text</td>
    <td class = "class2>text</td>
</tr>

а потом иметь файл css .class1 { фон-Цвет: Красный; граница: сплошной зеленый 2px; ` } или вы можете использовать древовидную структуру с дочерними элементами first-child , кстати, первый столбец, вероятно, является th, а не td

Поделиться sir_t     30 октября 2013 в 00:15

<style>
table
{
   border-collapse:collapse;
}
table#data,th,td
{
   border:1px solid black;
}
</style>

#data,
#data th,
#data td
{
   border:1px solid black;
}

table#data,
table#data th,
table#data td
{
   border:1px solid black;
}