Таблицы и их содержимое отодвигаются в сторону — почему?

У меня есть несколько таблиц и их содержимое выглядит нормально в JSFiddle, но на другом сайте, открытом в том же браузере, все - таблица, содержимое - смещается вправо (снимок экрана). Как я могу заставить содержимое выглядеть так, как в приведенном выше примере JSFiddle? Все должно быть перемещено обратно влево (см. стрелки на скриншоте).
Спасибо!

Вот исходный код:

<table style = "height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border = "0">
  <tbody>
    <tr style = "height: 18px;">
      <td style = "width: 13.0819%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
      <td style = "width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
      <td style = "width: 13.0819%;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
      <td style = "width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style = "height: 18px;">
      <td style = "width: 13.0819%; height: 10px;"><img style = "display: block; margin: 0px auto 30px auto;" src = "https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt = "" width = "120" height = "120" /></td>
      <td style = "width: 63.7345%; height: 10px;">
        <table style = "height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border = "0">
          <tbody>
            <tr style = "height: 18px;">
              <td style = "width: 100%; height: 10px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
            </tr>
            <tr style = "height: 18px;">
              <td style = "width: 100%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
            </tr>
          </tbody>
        </table>
        <table style = "height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border = "0">
          <tbody>
            <tr style = "height: 18px;">
              <td style = "width: 10.1%; height: 18px;"><img src = "https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt = "" width = "16" height = "16" /></td>
              <td style = "width: 690.907%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

что вы подразумеваете под другой сайт? Вы копируете и вставляете свой код в локальный текстовый редактор и видите в браузере своего ПК, и он отличается от вашего кода jsfiddle?

— 17.03.2022 14:31

Да, вроде: этот код является подписью электронной почты, поэтому я подключаю его к веб-сайту поставщика услуг электронной почты, и то, что я вижу, отличается от того, что показывает JSFiddle.

— 18.03.2022 09:36

html css html-table

17.03.2022 13:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я правильно понял задачу, вы хотите сместить содержимое влево в любой ситуации. Но сначала вы должны знать причина этого поведения. Причина: Относительные единицы CSS. В CSS вы можете определить единицу ширины, высоты или любого другого свойства двумя способами:

С относительными единицами, такими как % или vw или...
С абсолютными единицами, такими как px.

Второй подходит для случаев, когда вы хотите, чтобы элемент (здесь тег table) имел фиксированное значение (например, фиксированное width) независимо от браузера (здесь ширина браузера). Когда вы вставляете свой код в jsfiddle, он показывает результат в нижней правой части браузера. Таким образом, ширина для отображения содержимого ограничена, и поскольку вы определили свою ширину относительно (width: 99.0328%) ширины родительского элемента (здесь тег body), вы видите, что элементы плотные, а расстояние между ними мало. Если вы видите этот код в браузере ПК (который имеет большую ширину), вы получите результат другой (как на изображении, которое вы разместили). Таким образом, одно из решений для этого — поместить всю таблицу в тег <section> и указать абсолютную ширину для этого тега <section>, как в приведенном ниже коде:

<!doctype html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport"
          content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
</head>
<body>

<section style = "width: 606px">
<table style = "height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border = "0">
    <tbody>
    <tr style = "height: 18px;">
        <td style = "width: 13.0819%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
        <td style = "width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
        <td style = "width: 13.0819%;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
        <td style = "width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style = "height: 18px;">
        <td style = "width: 13.0819%; height: 10px;"><img style = "display: block; margin: 0px auto 30px auto;" src = "https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt = "" width = "120" height = "120" /></td>
        <td style = "width: 63.7345%; height: 10px;">
            <table style = "height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border = "0">
                <tbody>
                <tr style = "height: 18px;">
                    <td style = "width: 100%; height: 10px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
                </tr>
                <tr style = "height: 18px;">
                    <td style = "width: 100%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
                </tr>
                </tbody>
            </table>
            <table style = "height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border = "0">
                <tbody>
                <tr style = "height: 18px;">
                    <td style = "width: 10.1%; height: 18px;"><img src = "https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt = "" width = "16" height = "16" /></td>
                    <td style = "width: 690.907%; height: 18px;"><span style = "font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</section>

</body>
</html>

Если вы хотите узнать больше о CSS units, я предлагаю прочитать больше руководств, таких как Вот этот.

17.03.2022 15:08