Сделайте так, чтобы div заполнял всю ширину и высоту ячейки таблицы с неопределенными размерами

ProgramBox

Сделайте так, чтобы div заполнял всю ширину и высоту ячейки таблицы с неопределенными размерами

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

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

 table, th, td, div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}
div {
  writing-mode: vertical-rl;
  
  background-color: #ddd;
  border-color: #bbb;
}

 <table>
  <tr>
    <td>one</td> <td>two</td> <td>three</td>
  </tr>
  <tr>
    <td rowspan="2"> <div>four</div> </td>
    
    <td>five</td> <td>six</td>
  </tr>
  <tr>
    <td>seven</td> <td>eight</td>
  </tr>  
</table>

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

Обратите внимание, что «четыре» div заполняет всю ширину и высоту ячейки таблицы на изображении, но не во фрагменте кода.

Есть вопросы, подобные этому, которые предполагают использование абсолютного позиционирования, которое не работает в этой конкретной ситуации (согласно моим попыткам) для таблицы с неопределенной шириной и высотой. В других ответах говорится, что нет способа сделать это без JavaScript. Но эти ответы были с 2010 года. Любой ввод будет высоко оценен.

1. Вы уверены, что хотите использовать table? Вы можете использовать сетку.

2. хороший вопрос @m4n0. Мой контент представляет собой табличные данные, поэтому для семантики: да. Я бы предпочел использовать таблицу, но я буду использовать сетку, если придется. Все еще остается вопрос, возможно ли это с таблицами html?

3. отрицательный запас? t

4. @TemaniAfif со всех сторон?

5. рабочее решение только для Chrome: jsfiddle.net/5n039rs6/1

Ответ №1:

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

 table,
th,
td,
div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}

.spl {
  writing-mode: vertical-rl;
  border-style: none;
}

.inb {
  background-color: #ddd;
}

 <table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td rowspan="2" class="inb">
      <div class="spl">four</div>
    </td>

    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
  </tr>
</table>

1. вы, по сути, скрыли границы div s и задаете цвет фона для ячейки таблицы. В этом вопросе предлагается заполнить ячейку таблицы div, потому что в моем проекте это не так просто, как в этом примере. Мне действительно нужно растянуть div саму ячейку по всей ячейке во всех направлениях.

Ответ №2:

Вы можете использовать jQuery следующим образом, чтобы получить (внешнюю) ширину и высоту этого родительского td элемента и применить его к этому div

 $(document).ready(function() { 
  var cellwidth1 = $('.x1').outerWidth();
  var cellheight1 = $('.x1').outerHeight();
  $('.x2').css({
  'height': cellheight1,
  'width': cellwidth1
  });
});

 * {
box-sizing: border-box;
}
table, th, td, div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}
td.x1 {
  padding: 0;
}
div.x2 {
  writing-mode: vertical-rl;
  background-color: #ddd;
  border-color: #bbb;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>one</td> <td>two</td> <td>three</td>
  </tr>
  <tr>
    <td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
    
    <td>five</td> <td>six</td>
  </tr>
  <tr>
    <td>seven</td> <td>eight</td>
  </tr>  
</table>

1. Использование ванильного JS — это одно, но jquery? Для этого? O.o

2. Вы написали: «Любой ввод будет высоко оценен», поэтому я не знаю, что думать о вашей реакции

3. Извините, я очень ценю ваш ответ и время, которое вы потратили. Однако в исходном вопросе я упоминал, что я не использую JavaScript. Тем не менее, я кое-что узнал из вашего ответа, и я ценю это; это просто кажется немного тяжелым для чего-то подобного ^^. В любом случае спасибо

Ответ №3:

После многих попыток кажется, что с 2020 года растягивание a div для заполнения всего доступного пространства ячейки таблицы без JavaScript невозможно, если вы не используете абсолютное / относительное позиционирование.

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

dev-sbx.github.io/x

Единственным реальным решением здесь, по-видимому, является использование макета сетки CSS, а не таблицы HTML.