Блог

Главная - Вопросы по программированию - Как поместить отступы между двумя столбцами таблицы?

Как поместить отступы между двумя столбцами таблицы?

#html #css #html-table #flexbox

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

Вопрос:

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

Это мой HTML и CSS код без медиа-запросов:

 .main--container__footer {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /* background: indianred; */
}

.footerparent {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    /* background: coral; */
}

.footerfirstchild {
    display: flex;
    align-content: center;
    justify-content: center;
}

/* AALogo */
.footer--socials {
    border-top: rgb(220, 224, 228) solid 0.14285rem;
    border-bottom: rgb(220, 224, 228) solid 0.14285rem;
}

.footer--list__div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.AAregular {
    font-size: 1.142rem;
    letter-spacing: 0rem;
    color: #495662;
    opacity: 1;
    font-weight: normal;
    padding-top: 1rem;
    line-height: 2rem;
}

.AAbold {
    font-size: 1.428571428rem;
    letter-spacing: 0rem;
    color: #495662;
    line-height: 1.857rem;
}

.footer--socials {
    width: 11rem;
}
/* techtrackpic */

.footer--pic {
    flex-direction: column;
    border-left: rgb(220, 224, 228) solid 0.14285rem;
    font-size: 0.714285rem;
    text-align: center;
    top: 0rem;
}

.table--list {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
}

.table--list td,
.table--list th {
    padding: 0.3125rem 1.125rem;
    text-align: left;
}

th {
    text-align: left;
    font: 1.625rem;
    letter-spacing: 0rem;
    color: #495662;
    opacity: 1;
    font-weight: bold;
}

.table--lists th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: left;
    background: green;
}

td {
    letter-spacing: 0rem;
    color: #495662;
    /* background: chocolate; */
    font-size: 0.875rem;
    font-weight: normal;
}

.footer--language {
    padding-top: 1.875rem;
}
.footer--lang__lang {
    font-size: 1rem;
    font-weight: lighter;
}
.footer--lang__option {
    font-size: 1rem;
    font-weight: normal;
}

.footer--lang__icon {
    display: inline-block;
    transform: translateY(25%);
}
.footer--lang__lang {
    display: inline;
}
.footer--lang__option {
    display: inline;
}

.footer--language {
    display: flex;
    align-content: center;
    justify-content: center;
    color: #495662;
}

small {
    padding-bottom: 1rem;
}

.socialicon {
    width: 5%;
}  
 <div className="footerfirstchild footer--list__div">
   <table className="table--list">
      <tr>
         <th className="footer--book">Book</th>
         <th className="footer--about">About</th>
         <th className="footer--block footer--list3">Help</th>
      </tr>
      <tr>
         <td className="footer--book">Best Fare Finder</td>
         <td className="footer--about">Blog</td>
         <td  className="footer--block footer--list3">FAQs</td>
      </tr>
      <tr>
         <td className="footer--book">Search amp;#38; Book</td>
         <td className="footer--about">About us</td>
         <td  className="footer--block footer--list3">Contact us</td>
      </tr>
      <tr>
         <td className="footer--book">Multi search</td>
         <td className="footer--about">Airlines we ticket</td>
         <td  className="footer--block footer--list3">Privacy</td>
      </tr>
      <tr>
         <td className="footer--book">Currencies</td>
         <td className="footer--about">Reviews</td>
         <td  className="footer--blockfooter--list footer-list3">Tamp;#38;Cs</td>
      </tr>
      <tr>
         <td className="footer--book">Ways to pay</td>
         <td className="footer--about">Work with us</td>
         <td></td>
      </tr>
      <tr>
         <td className="footer--book">Online check-in</td>
         <td className="footer--about">Sitemap</td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td className="footer--about">Media Centre</td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </table>
</div>

Это CSS для медиа-запросов

 /* Footer */
.footerparent {
    display: block;
}
.footer--list__div {
    display: flex;
    flex-direction: column;
}
.footer--block {
    display: block;
    padding-left: 0%;
}
.footer--list3 {
    display: none;
}
.footerlist--help {
    display: flex;
    flex-direction: row;
}
.last--footerlist--pic {
    padding-right: 30%;
}
.footer--help {
    padding-top: 10%;
    padding-left: 20%;
    visibility: visible;
    display: block;
    /* }.last--footerlist--pic{
        visibility: visible;
        display: inline;
    } */
}
.footer--pic__tech2 {
    display: inline;
    padding-left: 50%;
    text-align: center;
}
.footer--pic__tech {
    display: none;
}
.footer--book {
    /* float:left; */
}
.footer--about {
}
.table--list {
}

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

1. w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

Ответ №1:

 table {
  border-collapse: separate;
  border-spacing: 10px;
}

table thead th:nth-child(1), table tbody td:nth-child(1), table tbody td:nth-child(2) {
  border: 1px solid black;
}  
 <table>
  <thead>
    <tr>
      <th colspan="2">Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>

Это лучший пример, который я могу привести. Если это вам не поможет, пожалуйста, скажите мне.