HTML / CSS: удалить внешние границы таблицы

ProgramBox

HTML / CSS: удалить внешние границы таблицы

Post author:admin
Запись опубликована:10 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

У меня есть приведенный ниже HTML / CSS, который должен размещать три таблицы одинакового размера рядом друг с другом (так и есть). Тем не менее, я пытаюсь удалить поле из самых внешних таблиц во вложенной структуре. Из-за CSS для внутренних таблиц и того факта, что мне нужно разместить три внешние таблицы рядом друг с другом, я пытался border-collapse , border=none даже border-color=white . Чего мне не хватает?

 .maintable {
  border: 0px;
  float: left;
}

.tablestyle {
  border: 1px solid black;
  width: 420px;
}

.wide {
  width: 40%;
}

.thin {
  width: 20%;
}

td,
th {
  border: 1px solid black;
  padding: 2px;
}

 <html>

<head>
</head>
<br>
<br>

<body>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
</body>

</html>

РЕДАКТИРОВАТЬ: три внешних поля — это то, что я пытаюсь скрыть.

1. Код, который у вас есть, не является плавающим для таблиц, поэтому трудно понять, в чем проблема. Также, пожалуйста, покажите нам, где вы использовали border-collapse , border=none и border-color=white чтобы мы могли видеть, что вы пытались сделать.

2. Этот HTML-код с таблицей в таблице, подобной этой, на самом деле недействителен, но является ли удаление границы из .tablestyle класса тем, что вы хотите?

3. table Элемент может содержать только элементы caption , colgroup thead , tbody tfoot tr ,,,,,,,,,,,,,,, или,,,. Имя атрибута — colspan , а не col и span . Конечно, вам не нужен colspan атрибут, если ячейка занимает один столбец. В любом случае ваш HTML недействителен.

4. @abney317 На самом деле я пытаюсь удалить его из .maintable

5. Я только что отредактировал сообщение. Я пытаюсь удалить эти три внешних поля. Все вложенные таблицы в порядке.

Ответ №1:

Вы можете удалить границу таблицы с помощью атрибута border

 <table border="0">

        
            .tablestyle {
                width: 420px;
            }
            .wide {
                width: 40%;
            }
            .thin {
                width: 20%;
            }
            td, th {
                border: 1px solid black;
                padding: 2px;
            }

 <table border="0" class="tablestyle">
                    <th colspan="4"></th>
                    <col span="1" class="wide">
                    <tr><th col span="1" class="thin"></th><th col    span="1" class="thin"></th><th col span="1" class="thin"></th><th col span="1" class="thin"></th></tr>
                    <tr><td></td><td></td><td></td><td></td></tr>
</table>

Ответ №2:

Просто закомментируйте эту строку /*border: 1px solid black;*/ в .tablestyle

 .maintable {
  border: 0px;
  float: left;
}

.tablestyle {
  border: none;
  /* 1px solid black;*/
  width: 420px;
}

.wide {
  width: 40%;
}

.thin {
  width: 20%;
}

td,
th {
  border: 1px solid black;
  padding: 2px;
}

 <br>
<br>

<body>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>
  <table class="maintable">
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="tablestyle">
      <th colspan="4"></th>
      <col span="1" class="wide">
      <tr>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
        <th col span="1" class="thin"></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </table>

1. Привет, @Gad Я пробовал это, однако, его нужно было бы удалить, чтобы .maintable не .tablestyle . И по какой-то причине удаление его из maintable ничего не дает. Это все еще отображается.

2. @sbagnato самый простой способ — установить для table.maintanable и table.tablestyle ‘s border значение none , потому что оба они являются таблицами, содержимое которых находится внутри, поэтому, если вы не установите ни для одной из них значение none , будут отображаться границы вокруг ее дочерних элементов

3. Хм, .tablestyle граница теперь скрыта, но .maintable все еще существует, даже если для обоих значений установлено значение none. Я не понимаю, чего мне не хватает…