Блог

Главная - Вопросы по программированию - CSS — выравнивание столбцов между двумя таблицами невозможно, а размер столбца одинаков

CSS — выравнивание столбцов между двумя таблицами невозможно, а размер столбца одинаков

#html #css

#HTML #css

Вопрос:

У меня есть две таблицы, и размер столбцов одинаков между таблицами, но на экране столбцы не выровнены. По какой-то неизвестной причине вертикальная полоса столбца находится на несколько пикселей влево или вправо. Я перепробовал много подходов CSS, но я все еще не понимаю, чего не хватает.

 table {
  display: table;
  font-family: "Helvetica Neue", Helvetica, sans-serif ;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 6px 0;
}
th, td {
  font-family: "Helvetica Neue", Helvetica, sans-serif ;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 6px 0;
}
.val { 
  text-align: right
  padding: 6px 0;
  border: 1px solid black;
  border-collapse: collapse;
  width:   150px;
}
.bigTotal_bkp {
  display: table;
  border:  1px solid black;
  border-collapse: collapse;
  background:  SeaGreen;
  color:       #FFF ;
  font-weight: bold;
  padding:     6px 0;
}
.bigTotal {
  display: table;
  border:  1px solid black;
  border-collapse: collapse;
  background:  SeaGreen;
  color:       #FFF ;
  font-weight: bold;
  padding:     6px 0;
}  
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>My Report</title>
  </head>
  <body>
    <table class="bigTotal_bkp">
      <tr>
         <td colspan="5" style="width: 350px;">TOTAL Sales onlie storages (without_bkp)</td>
         <td class="val" style="width: 76px;">16124 </td>
         <td style="width: 76px;"> </td>
         <td style="width: 76px;"> </td>
         <td style="width: 300px; color: yellow; background=white;text-align: center">( * _bkp = storages used 10% )</td>
      </tr>
    </table>
    <table class="bigTotal">
      <tr>
         <td colspan="3" style="width: 350px;">TOTAL Sales offline storages</td>
         <td class="val" style="width: 76px;"></td>
         <td class="val" style="width: 76px;">23602 </td>
      </tr>
    </table>
  </body>
</html>

Заранее спасибо за ваш отзыв.

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

1. Ваша проблема на самом деле на маленьком экране или большом? Потому что на большом экране Chrome это кажется нормальным

2. почему вы используете две таблицы? вы получите идеальное выравнивание, если будете использовать только одну таблицу.

3. Я пытаюсь использовать разные ОС / браузеры / разрешение, и в настоящее время оно не выравнивается в Linux / Chrome / Full HD.

Ответ №1:

     table {
  display: table;
  font-family: "Helvetica Neue", Helvetica, sans-serif ;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 6px 0;
}
th, td {
  font-family: "Helvetica Neue", Helvetica, sans-serif ;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 6px 0;
}
.val { 
  text-align: right
  padding: 6px 0;
  border: 1px solid black;
  border-collapse: collapse;
  width:   150px;
}
.bigTotal_bkp {
  display: table;
  border:  1px solid black;
  border-collapse: collapse;
  background:  SeaGreen;
  color:       #FFF ;
  font-weight: bold;
  padding:     6px 0;
}
.bigTotal {
  display: table;
  border:  1px solid black;
  border-collapse: collapse;
  background:  SeaGreen;
  color:       #FFF ;
  font-weight: bold;
  padding:     6px 0;
}

      
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>My Report</title>
    
    
  </head>
  <body>
    <table class="bigTotal_bkp">
      <tr>
         <td style="width: 350px;">TOTAL Sales onlie storages (without_bkp)</td>
         <td class="val" style="width: 76px;">16124 </td>
         <td style="width: 76px;"> </td>
         <td style="width: 76px;"> </td>
         <td style="width: 300px; color: yellow; background=white;text-align: center">( * _bkp = storages used 10% )</td>
      </tr>
          <tr>
         <td colspan="3" style="width: 350px;">TOTAL Sales offline storages</td>
         <td class="val" style="width: 76px;"></td>
         <td class="val" style="width: 76px;">23602 </td>
      </tr>
    </table>
  </body>
</html>

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

1. Я не могу добавить две таблицы в одну, потому что в реальном мире все страницы представляют собой файлы, созданные xlstproc. Я не могу переписать все файлы xslt. Темы находятся в разных таблицах, их необходимо выровнять.