ч в пределах таблицы, но вся ширина

Question

Я сделал этот блок кода

<table> 
    {item.awards.map((obj,i) => 
    <tbody> 
     <tr> 
      <td>Name</td> 
      <td>:</td> 
      <td>{obj.title}</td> 
     </tr> 
     <tr> 
      <td>Date</td> 
      <td>:</td> 
      <td>{obj.award}</td> 
     </tr> 
     {i !== item.awards.length-1 ? <hr /> : ''} 
    </tbody> 
    )} 
    </table> 

Он работал, каждый блок имеет разделитель (<hr/>), но проблема сейчас длина час не является полной шириной. Я не могу сделать таблицу 100%, так как это повлияет на td.

Answer 1

Недопустимо иметь hr как прямой ребенок от tbody. tbodycontent model разрешает только tr элементов (и скриптов). Даже если он работает в одном браузере, нет гарантии, что он будет в другом, или даже в следующей точке rev того, где он работал.

Таким образом, вы должны поставить hr в tr, что означает, поместив его в td или th:

{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null} 

Вы можете стилизовать hr по мере необходимости, с помощью CSS, чтобы сделать это так широко, как вам нравится , Например (обратите внимание на sep класс по строкам сепаратора и CSS это относится к строке и hr):

table { 
 
    border: 1px solid #ddd; 
 
} 
 
.sep hr { 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -0.1em; 
 
} 
 
.sep { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 1em; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td>:</td> 
 
     <td>{obj.title}</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date</td> 
 
     <td>:</td> 
 
     <td>{obj.award}</td> 
 
    </tr> 
 
    <tr class="sep"> 
 
     <td colspan="3"> 
 
     <hr /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td>:</td> 
 
     <td>{obj.title}</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date</td> 
 
     <td>:</td> 
 
     <td>{obj.award}</td> 
 
    </tr> 
 
    <tr class="sep"> 
 
     <td colspan="3"> 
 
     <hr /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td>:</td> 
 
     <td>{obj.title}</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Date</td> 
 
     <td>:</td> 
 
     <td>{obj.award}</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

---

(Примечание стороны: null является лучшим выбором, чем '' для третьего операнда этого условного оператора.)