Таблицы не выглядят одинаково на разных экранах - PullRequest
Новая
       45

Таблицы не выглядят одинаково на разных экранах

0 голосов
/ 10 октября 2019

У меня есть текстовая таблица, разделенная на 4 столбца (как показано на рисунке ниже), в которой отображаются все подкатегории (подкатегории уровня 2 и уровня 3). Эта таблица не выглядит одинаково, некоторые столбцы выглядят длиннее других) на разных размерах экрана (разных размерах ноутбуков) и на разных устройствах даже после того, как я попытался адаптировать ее с помощью запросов @media. Есть ли способ справиться с этим, чтобы все столбцы всегда выглядели одинаково?

Я использовал носитель 

.tblcol {
  width: 22%;
  text-align: left;
  font-size: 11px;
  font-family: "Palatino Linotype";
}

.heading {
  background-color: #790102;
  color: #ffffff;
  padding: 2px;
}

a {
  text-decoration: none;
}

.slogan {
  color: #790102;
  letter-spacing: 8px;
  font-size: 18px
}

@media(max-width:1023px) {
  .categoryTable1 {
    width: 500px;
  }
}

@media(min-width:1024px) and (max-width:1010px) {
  .categoryTable1 {
    width: 680px;
  }
}

@media(min-width:1011px) and (max-width:1300px) {
  .categoryTable1 {
    width: 740px;
  }
}

@media(min-width:1224px) and (max-width:1400px) {
  .categoryTable1 {
    width: 850px;
  }
}

@media(min-width:1410px) {
  .categoryTable1 {
    width: 970px;
  }
}
<table class="categoryTable1">
  <tr>
    <td colspan="4">
      <p style="text-align:center" class="slogan"> 1500+ ITEMS * 45 PRODUCTS * 14 CATEGORIES </p>
    </td>
  </tr>

  <tr>
    <td width="25%" class="tblcol">

      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">    Bespoke Tailoring for Men    </a><br>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">  Made to Measure for Juniors      </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
    </td>


    <td width="25%" class="tblcol">

      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">    Bespoke Tailoring for Men    </a><br>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">  Made to Measure for Juniors      </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>

    </td>


    <td width="25%" class="tblcol">

      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">    Bespoke Tailoring for Men    </a><br>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">  Made to Measure for Juniors      </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
    </td>


    <td width="25%" class="tblcol">

      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self"> <span class="heading"> BESPOKE CUSTOM MADE SERVICES  </span> </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">   Bespoke Tailoring for Women     </a><br>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">    Bespoke Tailoring for Men    </a><br>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">  Made to Measure for Juniors      </a><br>
    </td>
  </tr>
</table>

запрашивает обновление ширины таблицы в соответствии с размером. Но когда ширина стола уменьшается;4 столбца неоднородны: некоторые значительно больше остальных

1 Ответ

1 голос
/ 10 октября 2019 

.slogan {
  color: #790102;
  letter-spacing: 8px;
  font-size: 18px
}

.heading {
  background-color: #790102;
  color: #ffffff;
  padding: 2px;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
  font-size: 11px;
  font-family: "Palatino Linotype";
}
<table class="categoryTable1">

  <tr>
    <td colspan="4">
      <p style="text-align:center" class="slogan">1500+ ITEMS * 45 PRODUCTS * 14 CATEGORIES</p>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-men/ " target="_self">Bespoke Tailoring for Men</a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/made-to-measure-for-juniors/ " target="_self">Made to Measure for Juniors</a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-custom-made-services/ " target="_self">
        <span class="heading">BESPOKE CUSTOM MADE SERVICES</span>
      </a>
    </td>
  </tr>

  <tr>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
    <td>
      <a href="https://www.chinesefashionstyle.com/bespoke-tailoring-for-women/ " target="_self">Bespoke Tailoring for Women</a>
    </td>
  </tr>
</table>

Теперь все столбцы будут выглядеть одинаково. Элемент HTML определяет ряд ячеек в таблице. Ячейки строки могут быть установлены с использованием комбинации элементов (ячейка данных) и (ячейка заголовка). Вы можете узнать больше о таблицах HTML, используя ссылку ниже Нажмите здесь

...