Как выровнять содержимое таблицы HTML table - PullRequest
Новая
       1

Как выровнять содержимое таблицы HTML table

0 голосов
/ 20 декабря 2018

Я работаю в HTML для проекта.Нужна помощь в выравнивании двух таблиц.Таблица 1 содержит заголовок таблицы, а таблица 2 содержит тело таблицы.Как выровнять обе таблицы синхронно.

Вот код: 

<body>

<h2>HTML Table</h2>

<table>
<thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  </table>
  <table>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  </tbody>
</table>

</body>

Вот демоверсия

Ответы [ 6 ]

0 голосов
/ 02 января 2019 

<html>
<head>
<title>HTML table</title>
</head>
<body>
 <table border="5" align="center" bgcolor="pink" width="30%">
            <Thead>
                <Tr bgcolor="yellow">
                    <Th>ID</Th>
                    <Th>Name</Th>
                    <Th>Branch</Th>
                    <Th colspan="2">Skillset</Th>
                    
                </Tr>
            </Thead>
        </body>
            <Tbody>
                <Tr>
                    <Td>201</Td>
                    <Td>Sam</Td>
                    <Td rowspan="2">CSE</Td>
                    <Td>CSS</Td>
                    <Td>html</Td>
                </Tr>
    
                    <Tr>
                        <Td>202</Td>
                        <Td>Jack</Td>
                        <Td>Java</Td>
                        <Td>J2EE</Td>
                    </Tr>
                
                
                        <Tr>
                            <Td>203</Td>
                            <Td>Harsh</Td>
                            <Td>Mech</Td>
                            <Td>TDrilling</Td>
                            <Td>Java</Td>
                        </Tr>
                    
                    
                            <Tr>
                                <Td>204</Td>
                                <Td>Ryan</Td>
                                <Td>ECE</Td>
                                <Td>Java</Td>
                                <Td>Python</Td>
                            </Tr>
                        </Tbody>
        </table>
        </html>
0 голосов
/ 23 декабря 2018

Вы можете попробовать этот код 

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}
<h2>HTML Table</h2>

<table style="width:100%">
  <thead>
    <tr>
      <th>COMPANY</th>
      <th>CONTACT</th>
      <th>COUNTRY</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>alfreds</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>alfreds</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 20 декабря 2018

@ Р.Дж. Аравинд: Отредактированный пост зацените. 

table {
     font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    display: contents;
}

td, th {
 border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  display: table-cell;
  width: 500px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
h2 {text-align: center; }
<h2>HTML Table</h2>

  <table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    </thead>
    </table>
    <table>
    <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    </tbody>
  </table>
0 голосов
/ 20 декабря 2018

Вы можете изменить все на div и разобраться с этим.Это дает больше контроля над вашим стилем и кодом.Как указано выше: 

body {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table-wrapper {
  display: table;
}

.table-header {
  font-weight: bold;
  border-bottom: 2px solid #CCC;
}

.table-row,
.table-header {
  display: table-row;
}

.table-row:nth-child(even) {
  background-color: #dddddd;
}

.table-row>div,
.table-header>div {
  display: table-cell;
}

.table-wrapper,
.table-row>div,
.table-header>div {
  border: 1px solid #dddddd;
  border-collapse: collapse;
  text-align: left;
  padding: 8px;
}
<body>

  <h2>HTML Table</h2>

  <div class="table-wrapper">
    <div class="table-header">
      <div>Company</div>
      <div>Contact</div>
      <div>Country</div>
    </div>
    <div class="table-row">
      <div>Alfreds Futterkiste</div>
      <div>Maria Anders</div>
      <div>Germany</div>
    </div>
    <div class="table-row">
      <div>Alfreds Futterkiste</div>
      <div>Maria Anders</div>
      <div>Germany</div>
    </div>
  </div>

</body>
0 голосов
/ 20 декабря 2018

Сначала вам нужно исправить html таблицы (я сделал это ниже).Также в <tables> вы управляете шириной столбца из <th>.

Так будет выглядеть так: 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.company { width: auto; }
.contact { width: auto; }
.country { width: 100px; }
<table>
  <thead>
    <tr>
      <th class="company">Company</th>
      <th class="contact">Contact</th>
      <th class="country">Country</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 20 декабря 2018

Закрытие тега table и повторное его открытие создаст две разные таблицы, поэтому таблицы не будут выровнены.Чтобы выполнить «выравнивание» ваших предметов, вам нужно создать и <thead> и <tbody> в одной таблице, как вы можете видеть ниже: 

    <body>

    <h2>HTML Table</h2>
    
    <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      </thead>
    
      <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      </tbody>
    </table>
    
    </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...