Две равные ячейки таблицы, разные доступные места для контента? - PullRequest
Новая
       2

Две равные ячейки таблицы, разные доступные места для контента?

0 голосов
/ 03 мая 2020

Я пытаюсь создать таблицу с монотипным текстом и заметил, что иногда содержимое из одной ячейки не помещается в другую ячейку, которая должна быть такого же размера. Может кто-нибудь объяснить мне, почему это так или как я могу это исправить? Смотрите пример ниже, где я пытаюсь поместить одинаковое количество «-» в обе ячейки. В первой ячейке он не помещается, поэтому последние "-" переносятся в следующую строку. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table style="font-family: Courier; table-layout:fixed; width:468px; margin: 0 auto; border-collapse: collapse">

      <tr>
        <td style="border: 1px solid black;" colspan="6">------------------------</td>

        <td style="border: 1px solid black;" colspan="6">------------------------</td>
      </tr>
    </table>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 03 мая 2020 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table style="font-family: Courier; table-layout:fixed; width:468px; margin: 0 auto; border-collapse: collapse">

      <tr>
        <td style="border: 1px solid black; padding:5px 0" colspan="6">------------------------</td>

        <td style="border: 1px solid black;" colspan="6">------------------------</td>
      </tr>
    </table>
  </body>
</html>
0 голосов
/ 03 мая 2020

Попробуйте добавить 1px к ширине (469 вместо 468), и это будет соответствовать. Я думаю, что проблема может быть в 1px границе между двумя td, которые получают 1px пространства в строке. [первый тд (233 пикс.) | граница 1px | second td (234px)] = 233 + 1 + 234 = 468 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table style="font-family: Courier; table-layout:fixed; width:469px; margin: 0 auto; border-collapse: collapse">

      <tr>
        <td style="border: 1px solid black;" colspan="6">------------------------</td>

        <td style="border: 1px solid black;" colspan="6">------------------------</td>
      </tr>
    </table>
  </body>
</html>
0 голосов
/ 03 мая 2020

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

table td {width:100px; word-wrap:break-word;}


table td {width:100px; word-wrap:break-word;}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table style="font-family: Courier; table-layout:fixed; width:468px; margin: 0 auto; border-collapse: collapse">

      <tr>
        <td style="border: 1px solid black;" >xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>

        <td style="border: 1px solid black;" >---------------------------</td>
      </tr>
    </table>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...