Как я могу отделить горизонтальное правило от таблицы. Они смешаны вместе. Я хочу горизонтальное правило ниже моей таблицы - PullRequest
Новая
       4

Как я могу отделить горизонтальное правило от таблицы. Они смешаны вместе. Я хочу горизонтальное правило ниже моей таблицы

1 голос
/ 19 февраля 2020

Мое горизонтальное правило смешано с частью информации в таблице

Итак, моя задача - создать две отдельные таблицы рядом, а не одну таблицу под другой как обычно. Я сделал что-то, что заставило его работать, но теперь мой тег <hr> смешан с таблицами. 

<h3>Skills</h3>
<table style="float: left">
   <tr>
      <td>Sleeping</td>
      <td>&#9733;&#9733;&#9733;&#9733;</td>
   </tr>
   <tr>
      <td>Eating</td>
      <td>&#9733;&#9733;&#9733;</td>
   </tr>
</table>
<table style="float: left">
   <tr>
      <td>Gaming</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
   </tr>
   <tr>
      <td>Reading</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
</table>
<hr size="3" noshade="3">

Это код. Может кто-нибудь помочь мне поставить горизонтальное правило под столом? Как вы можете видеть из моего кода, тег hr появляется после закрытия второго тега таблицы, но мой окончательный вывод смешал горизонтальное правило вместе с таблицей, а не под ним. Какую ошибку я сделал в своем коде? Любая помощь будет оценена, особенно из моего кода. Кто-нибудь посоветует мне, что не так с моим кодом.

Кроме того, я не совсем уверен, какова работа тега div, так как это было своего рода задание, если кто-то может мне хорошо объяснить, и почему я вставил его в свой код, я, честно говоря, не знаю.

Ответы [ 4 ]

0 голосов
/ 26 февраля 2020

Я нашел решение

Мне просто нужно было поместить две таблицы в одну основную таблицу, две таблицы были бы данными таблицы внутри строк таблицы 

    <h3>Skills</h3>
<table cellspacing="10">
  <td>
  <table cellspacing="10">
    <tr>
      <td>Sleeping</td>
      <td>&#9733;&#9733;&#9733;&#9733;</td>
    </tr>
    <tr>
      <td>Eating</td>
      <td>&#9733;&#9733;&#9733;</td>
    </tr>
  </table>
</td>
<td>
  <table cellspacing="10">
    <tr>
      <td>Gaming</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
    </tr>
    <tr>
      <td>Reading</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
  </table>
</td>
</table>
0 голосов
/ 19 февраля 2020 

table {
  float: left
}

hr {
  clear: both
}
<h3>Skills</h3>
<table>
  <tr>
    <td>Sleeping</td>
    <td>&#9733;&#9733;&#9733;&#9733;</td>
  </tr>
  <tr>
    <td>Eating</td>
    <td>&#9733;&#9733;&#9733;</td>
  </tr>
</table>
<table style="float: left">
  <tr>
    <td>Gaming</td>
    <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
  </tr>
  <tr>
    <td>Reading</td>
    <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
</table>
<hr size="3" noshade="3">
0 голосов
/ 19 февраля 2020

Просто образованное предположение, на этом этапе у вас есть два <table style="float: left">, вы пробовали <table style="float: right"> для своего второго стола? вместо левого? Надеюсь, это поможет !!

0 голосов
/ 19 февраля 2020

Измените стили <table> s на display ed как inline: 

<h3>Skills</h3>
<table style="display:inline">
   <tr>
      <td>Sleeping</td>
      <td>&#9733;&#9733;&#9733;&#9733;</td>
   </tr>
   <tr>
      <td>Eating</td>
      <td>&#9733;&#9733;&#9733;</td>
   </tr>
</table>
<table style="display: inline">
   <tr>
      <td>Gaming</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
   </tr>
   <tr>
      <td>Reading</td>
      <td>&#9733;&#9733;&#9733;&#9733;&#9733;</td>
</table>
<hr size="3" noshade="3">

JSFiddle .

...