Фиксированная ширина на втором тд в редактируемой таблице

Я хочу иметь фиксированную ширину для моей редактируемой таблицы, но я также хочу установить разную ширину для каждого TD. В моей попытке я могу установить таблицу с фиксированной шириной, но это приводит к тому, что ширина TD кажется 50% вместо 80% - 20%, которые у меня были до установки фиксированной ширины.

CSS

table {
  margin: 15px 0;
  border: 1px solid black;
  table-layout: fixed;
  width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;

    border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
    border:1px solid #000; }

HTML

<div class="fixed" contenteditable="true">
<table>
    <tbody>
<tr>
            <td colspan="2">Header:</td>

</tr>
        <tr>
            <td>Name:</td>
            <td><br/></td>
</tr>
        <tr>
            <td>DOB::</td>
            <td><br/></td>
</tr>
        <tr>
            <td>Comments:</td>
            <td><br/></td>
</tr>

        </table>

Что мне не хватает? Проверьте эту скрипку, если это поможет. Попробуйте, набрав достаточно, чтобы увидеть, что он автоматически переходит к следующей строке после определенной точки.

Источник

2 ответа

Решение

Проблема с вашим кодом в том, что ваш первый <tr> имеет colspan="2", Поэтому, когда вы даете width:100% ко всем TD таблицы, css не будет применен к базовым TD, как вы хотите.

Ваше решение состоит в том, чтобы отделить заголовок тд: <td colspan="2">Header:</td> в отдельную таблицу (см. HTML-1 ниже) или поместите базовые TD в тот же TR, что и заголовок (см. HTML-2 ниже).

Также измените CSS и упростите его, как я сделал ниже. Вы написали много ненужных CSS.

Рабочая скрипка здесь

Вот что я попробовал. попробуй это:

HTML-1:

<table class="fixed" >
    <tbody>
    <tr>
        <td colspan="2">Header:</td>
    </tr>
    </tbody>
</table>
<table  class="fixed" >
    <tbody>
    <tr>
        <td>Name:</td>
        <td>test</td>
    </tr>
    <tr>
        <td>DOB::</td>
        <td>tes</td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td>test</td>
    </tr>
</table>

HTML-2:

<table class="fixed" >
<tbody>
  <tr>
        <td colspan="2">Header:</td>
    <tr>
        <td>Name:</td>
        <td>test</td>
    </tr>
    <tr>
        <td>DOB::</td>
        <td>tes</td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td>test</td>
    </tr>
 </tr>
</tbody>
</table>

Упрощенный CSS:

table {
  margin: 0 0;
  width: 100%;
  table-layout: fixed;
}

.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}

.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }
Источник

У вас есть ошибки в вашем синтаксисе HTML, хотя это не имеет никакого отношения к проблеме. Смотрите, если вам нужно что-то вроде этой скрипки.

table {
  margin: 15px 0;
  border: 1px solid black;
  
  width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;

    border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
    border:1px solid #000; }
<div class="fixed" contenteditable="true">
<table>
 <tbody>
<tr>
   <td colspan="2">Header:</td>
   
</tr>
  <tr>
   <td>Name:</td>
   <td><br/></td>
</tr>
  <tr>
   <td>DOB::</td>
   <td><br/></td>
</tr>
  <tr>
   <td>Comments:</td>
   <td><br/></td>
</tr>
    </tbody> 
    </table></div>

в противном случае вы не сможете получить переменную ширину td, так как все столбцы будут иметь одинаковую ширину. Вы можете использовать атрибут colspan для обхода проблемы.

Источник
Другие вопросы по тегам