Как сделать таблицу, которая не изменяется в размере в HTML

0

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

Теги:
internet-explorer
dreamweaver

3 ответа

0

Вот примерная таблица с фиксированной структурой

<!DOCTYPE html>
<html>
<head>

    <title>Table</title>
    <style type="text/css">
        #gradient-style
        {
            width: 100%;
            text-align: left;
            border-collapse: collapse;
            table-layout: fixed;
            text-align: center;
            border: 1px solid black;
        }
        #gradient-style th
        {
            padding: 6px;
            width: auto;
        }
        #gradient-style td
        {       
            text-align: center;
            vertical-align: middle; 
            height: 20px;
            border: 1px solid black;
        }

    </style>
   </head>
   <body>
   <table id="gradient-style" cellspacing="0">
        <thead>
            <tr>
                <th scope="col">Column 1</th>
                <th scope="col">Column 2</th>
                <th scope="col">Column 3</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Row 1</td>
                <td>Row 1</td>
                <td>Row 1</td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td>Row 2</td>
                <td>Row 2</td>
            </tr>

        </tbody>
         <tfoot>
            <tr>
                <td colspan="3">Table description goes here....</td>
            </tr>
        </tfoot>
      </table>
   </body>
</html>
Поделиться
0

Вы можете попробовать следующее:

<table>
    <tr>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 1 Title 1  Title 1  Title 1  Title 1  Title 1  Title 1  Title 1  Title 1 
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 2 Title 2  Title 2  Title 2  Title 2  Title 2  Title 2  Title 2  Title 2 
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Title 3 Title 3  Title 3  Title 3  Title 3  Title 3  Title 3  Title 3  Title 3 
            </div>
        </td>
    </tr>
    <tr>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 1 Description 1  Description 1
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 2 Description 2  Description 2
            </div>
        </td>
        <td style="height: 50px; width: 100px; border: 1px solid black;">
            <div style="height: inherit;">
                Description 3 Description 3  Description 3
            </div>
        </td>
    </tr>
</table>

Но это может привести к тому, что ваши таблицы выглядят так, когда вы вставляете слишком много данных или слишком длинный текст: Изображение 174551

EDIT: Согласно Marc Audet, и это выглядит неплохо: Изображение 174551

Поделиться
  • 0
    Если вы установите overflow: auto или overflow: hidden для div , это решит проблему.
  • 0
    Да, я добавил скриншот, как это выглядит, когда вы используете советы Марка :)
0

Попробуй это:

FIDDLE

table 
{ 
  table-layout: fixed; 
    width: 100%;
}
th, td 
{ 
  height: 100px; /*whatever you need */
  break-word: word-wrap; /* prevent td to stretch to fit long words */
}
Поделиться
  • 0
    При изменении ширины порта просмотра в скрипте ячейки таблицы изменяют свою ширину! Вот что они делают!
  • 0
    хм ты прав, я это исправил
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню