Блог

Главная - Вопросы по программированию - Запретить divs перекрываться в таблице

Запретить divs перекрываться в таблице

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу, чтобы div распознавал, когда в его пространстве уже есть div, и перемещался вниз по пространству. В этом примере я использую div (stuff1), который превышает ширину его td, и я хочу, чтобы он был размещен и / или другим div (stuff4) в перекрывающемся td.

представить таблицу:

изображение 1

Как я хочу

изображение 2

     table, th, td {
        border: 1px solid black;
        }
</style>
</head>
<body>
<style>
.red{
     background-color:red;
     height:20px;
     margin-top:2px;
}
.yellow{
    background-color:yellow;
    height:20px;
    margin-top:2px;
}

.head{
background-color:aliceblue;
    height:20px;
    margin-top:2px;
    position:relative;
    top:0;
    
}

td{
vertical-align:top;
}  
 <table style="width:100%">
  <tr>
    <th>StuffList1</th>
    <th>StuffList2</th> 
    <th>StuffList3</th>
  </tr>
  <tr>
    <td>
    <div class="head">1</div>
    <div class="red" style="width:150%">stuff1</div>
    <div class="red" style="width:100%">stuff2</div>
    </td>
    <td>
    <div class="head">2</div>
    <div class="yellow">stuff4</div>
    </td>
    <td>
    <div class="head">3</div>
    <div>stuff5</div>
    <div>stuff6</div>
    </td>
   </tr>
</table>

Комментарии:

1. Просто добавьте <br> прямо перед <div class="yellow">stuff4</div> этим.

2. Спасибо за ваш ответ, мне нужно было бы реализовать решение динамически, чтобы </br> не работало.

3. Первая проблема, которую я вижу, — это расширение содержимого в соседнюю ячейку. Простое добавление overflow:visible к td не будет работать. Действительно ли таблица является подходящим инструментом для этой работы? CSS grid может работать лучше, но все равно будут проблемы.

Ответ №1:

вам просто нужно добавить еще один div во второй td, как показано ниже,

  <td>
        <div class="head">2</div>
        <div class="red" style="width:50%"></div>
        <div class="yellow">stuff4</div>
 </td>

используя этот код, вы достигнете желаемого результата, но я предпочитаю, чтобы вы использовали tr td tag с rowspan и colspan