У меня есть большая таблица со многими кольспанами, и ширина столбцов должна быть равна - PullRequest
Новая
       10

У меня есть большая таблица со многими кольспанами, и ширина столбцов должна быть равна

2 голосов
/ 22 апреля 2019

Я не могу получить столбцы в этой таблице данных равной ширине.Я прилагаю файл HTML.Цель состоит в том, чтобы обеспечить равную ширину GAW 325, GAW 331, GAW 333, GAW 334, GAW 337 и GAW 338.Размер остальных ячеек может изменяться по мере необходимости, для них нет других требований.Все CSS должны быть встроенными, так как у меня нет доступа к таблице стилей.

Я пытался использовать макет фиксированной ширины, вручную устанавливая таблицу и теги TD и TR различной ширины, используя встроенный HTML, CSS, пикселии в процентах. 

<table align="left" border="1" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF; " rowspan="2" valign="bottom">
            <p>Property</p>
            </td>
            <td bgcolor="#5e86a0" style="color:#FFFFFF; " colspan="11" >
            <p align="center">Material Sets</p>
            </td>
        </tr>
        <tr>
            <td>
            <p align="center">GAW 325</p>
            </td>
            <td style="" colspan="3">
            <p align="center">GAW 331<sup>a</sup></p>
            </td>
            <td style="" colspan="2">
            <p align="center">GAW 333</p>
            </td>
            <td style="" colspan="2">
            <p align="center">GAW 334<sup>a</sup></p>
            </td>
            <td style="" colspan="2">
            <p align="center">GAW 337<sup>a</sup></p>
            </td>
            <td style="">
            <p align="center">GAW 338</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>IP Rating<sup>b</sup></p>
            </td>
            <td colspan="11" >
            <p align="center">IP67 / IP68</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;">
            <p>ISO Rating</p>
            </td>
            <td colspan="2">
            <p align="center">–</p>
            </td>
            <td colspan="2">
            <p align="center">30 m water<br />
            @ 10 min</p>
            </td>
            <td colspan="7" >
            <p align="center">–</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Insertion loss @ 1kHz<sup>c</sup></p>
            </td>
            <td colspan="3" style="vertical-align: middle;">
            <p align="center">&lt; 2.5 dB</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">&lt; 4 dB</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">&lt; 1.5 dB</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">&lt; 1.8 dB</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">&lt; 1.3 dB</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Adhesive type</p>
            </td>
            <td colspan="11" style="vertical-align: middle;">
            <p align="center">Acrylic</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Adhesive temperature resistance</p>
            </td>
            <td colspan="4" style="vertical-align: middle;">
            <p align="center">-40 °C to 100 °C</p>
            </td>
            <td colspan="4" style="vertical-align: middle;">
            <p align="center">-40 °C to 85 °C</p>
            </td>
            <td colspan="3" style="vertical-align: middle;">
            <p align="center">-20 °C to 85 °C</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Membrane type</p>
            </td>
            <td colspan="11" style="vertical-align: middle;">
            <p align="center">ePTFE</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Membrane characteristic</p>
            </td>
            <td colspan="3" style="vertical-align: middle;">
            <p align="center">Oleophobic</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">Hydrophobic</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">Oleophobic</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">Hydrophobic</p>
            </td>
            <td colspan="2" style="vertical-align: middle;">
            <p align="center">Oleophobic</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF; width:16%" >
            <p>Membrane color</p>
            </td>
            <td style="vertical-align: middle; width:16%">
            <p align="center">Black</p>
            </td>
            <td colspan="3" style="vertical-align: middle; width:16%">
            <p align="center">Black</p>
            </td>
            <td colspan="2" style="vertical-align: middle; width:16%">
            <p align="center">White</p>
            </td>
            <td colspan="2" style="vertical-align: middle; width:16%">
            <p align="center">Black</p>
            </td>
            <td colspan="2" style="vertical-align: middle; width:16%">
            <p align="center">White</p>
            </td>
            <td style="vertical-align: middle; width:16%">
            <p align="center">Black</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>Support material</p>
            </td>
            <td colspan="6" style="vertical-align: middle;">
            <p align="center">PET-Nonwoven / PET</p>
            </td>
            <td colspan="5" style="vertical-align: middle;">
            <p align="center">PET</p>
            </td>
        </tr>
        <tr>
            <td bgcolor="#5e86a0" style="color:#FFFFFF;" >
            <p>RoHS <sup>d</sup></p>
            </td>
            <td colspan="11" >
            <p align="center">Meets threshold requirements</p>
            </td>
        </tr>
    </tbody>
</table>

Цель состоит в том, чтобы получить равные ширины GAW 325, GAW 331, GAW 333, GAW 334, GAW 337 и GAW 338.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Добавьте следующее к <table style="...">: 

table-layout:fixed; width:100vw

К каждому <td style="...">GAW*</td> добавить: 

width: 14vw;

и colspan="2"

Добавьте дополнительный colspan к каждой строке.

Дополнительно: Изменен ключ <td> на <th>.

A <table> со стилем table-layout: fixed позволяет нам присвоить ширину каждому столбцу. Это делается путем присвоения ширины самой применимой <td>/<th>, если она не совсем самая верхняя из ячеек, то <td>/<th> с наибольшей шириной в столбце будет определять ширину столбца.

Несколько советов:
Я знаю, что OP не может использовать CSS - это для будущих читателей

  • Используйте классы для объявления стиля не inline-styles.

    ? <th class='header'></th>

    ? <td style='color:#FFFFFF;'></td>

  • Устаревшие атрибуты: align, cellpadding, cellspacing, border, valign и bgcolor не должны использоваться - доступны CSS-эквиваленты. 

    <table align="left" border="1" cellpadding="0" cellspacing="0" style='table-layout:fixed;width:100vw'>
  <tbody>
    <tr>
      <th bgcolor="#5e86a0" style="width:14vw;color:#FFFFFF; " rowspan="2" valign="bottom">
        <p>Property</p>
      </th>
      <th bgcolor="#5e86a0" style="color:#FFFFFF; " colspan="12">
        <p align="center">Material Sets</p>
      </th>
    </tr>
    <tr>
      <th style='width:14vw' colspan="2">
        <p align="center">GAW<br>325</p>
      </th>
      <th style="width:14vw" colspan="2">
        <p align="center">GAW<br>331<sup>a</sup></p>
      </th>
      <th style="width:14ww" colspan="2">
        <p align="center">GAW<br>333</p>
      </th>
      <th style="width:14vw" colspan="2">
        <p align="center">GAW<br>334<sup>a</sup></p>
      </th>
      <th style="width:14vw" colspan="2">
        <p align="center">GAW<br>337<sup>a</sup></p>
      </th>
      <th style="width:14vw" colspan="2">
        <p align="center">GAW<br>338</p>
      </th>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>IP Rating<sup>b</sup></p>
      </th>
      <td colspan="12">
        <p align="center">IP67 / IP68</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>ISO Rating</p>
      </th>
      <td colspan="2">
        <p align="center">–</p>
      </td>
      <td colspan="2">
        <p align="center">30 m water<br /> @ 10 min</p>
      </td>
      <td colspan="8">
        <p align="center">–</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>Insertion Loss @ 1kHz<sup>c</sup></p>
      </th>
      <td colspan="4" style="vertical-align: middle;">
        <p align="center">&lt; 2.5 dB</p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center">&lt; 4 dB</p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center">&lt; 1.5 dB</p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center">&lt; 1.8 dB</p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center">&lt; 1.3 dB</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>Adhesive Type</p>
      </th>
      <td colspan="12" style="vertical-align: middle;">
        <p align="center">Acrylic</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p><small>Adhesive Temp Resistance</small></p>
      </th>
      <td colspan="4" style="vertical-align: middle;">
        <p align="center">-40 °C to 100 °C</p>
      </td>
      <td colspan="4" style="vertical-align: middle;">
        <p align="center">-40 °C to 85 °C</p>
      </td>
      <td colspan="4" style="vertical-align: middle;">
        <p align="center">-20 °C to 85 °C</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p><small>Membrane Type</small></p>
      </th>
      <td colspan="12" style="vertical-align: middle;">
        <p align="center">ePTFE</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p><small>Membrane Characteristic</small></p>
      </th>
      <td colspan="4" style="vertical-align: middle;">
        <p align="center"><small>Oleophobic</small></p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center"><small>Hydrophobic</small></p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center"><small>Oleophobic</small></p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center"><small>Hydrophobic</small></p>
      </td>
      <td colspan="2" style="vertical-align: middle;">
        <p align="center"><small>Oleophobic</small></p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF; width:16%">
        <p><small>Membrane Color</small></p>
      </th>
      <td style="vertical-align: middle; width:16%">
        <p align="center"><small>Black</small></p>
      </td>
      <td colspan="4" style="vertical-align: middle; width:16%">
        <p align="center">Black</p>
      </td>
      <td colspan="2" style="vertical-align: middle; width:16%">
        <p align="center">White</p>
      </td>
      <td colspan="2" style="vertical-align: middle; width:16%">
        <p align="center">Black</p>
      </td>
      <td colspan="2" style="vertical-align: middle; width:16%">
        <p align="center">White</p>
      </td>
      <td style="vertical-align: middle; width:16%">
        <p align="center"><small>Black</small></p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>Support Material</p>
      </th>
      <td colspan="6" style="vertical-align: middle;">
        <p align="center">PET-Nonwoven / PET</p>
      </td>
      <td colspan="6" style="vertical-align: middle;">
        <p align="center">PET</p>
      </td>
    </tr>
    <tr>
      <th bgcolor="#5e86a0" style="color:#FFFFFF;">
        <p>RoHS <sup>d</sup></p>
      </th>
      <td colspan="12">
        <p align="center">Meets Threshold Requirements</p>
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 22 апреля 2019

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

        <tr>
        <td>
        <p align="center"  style="padding-left: 30px; padding-right: 30px;">GAW 325</p>
        </td>
        <td style="" colspan="3">
        <p align="center"  style="padding-left: 30px; padding-right: 30px;">GAW 331<sup>a</sup></p>
        </td>
        <td style="" colspan="2">
        <p align="center"  style="padding-left: 5px; padding-right: 5px;">GAW 333</p>
        </td>
        <td style="" colspan="2">
        <p align="center"  style="padding-left: 30px; padding-right: 30px;">GAW 334<sup>a</sup></p>
        </td>
        <td style="" colspan="2">
        <p align="center"  style="padding-left: 10px; padding-right: 10px;">GAW 337<sup>a</sup></p>
        </td>
        <td style="">
        <p align="center"  style="padding-left: 40px; padding-right: 40px;">GAW 338</p>
        </td>
    </tr>

html-таблицы всегда трудно понять правильно. Я понимаю, что вы имеете ввиду; Попытка изменить ширину ячейки напрямую приводит к ненормальным результатам.

Вот скрипка с моей правкой:

https://jsfiddle.net/exv05h7u/4/

Опять же, не самый плавный и элегантный подход, но, надеюсь, он поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...