Как получить фиксированную ширину столбцов таблицы - PullRequest
Новая
       3

Как получить фиксированную ширину столбцов таблицы

4 голосов
/ 21 ноября 2011

Как сделать отдельные столбцы таблицы фиксированными для определенной ширины, чтобы независимо от объема текста в этом столбце ширина столбца оставалась неизменной?

<col> тег подходит только для Firefox

table-layout:fixed для всей таблицы действительно

Просто установка width не делает этого

Какое свойство CSS лучше использовать для этого

Ниже приведен код: 

    .video{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
            .audio{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
            .image{
        overflow:hidden;
        table-layout:fixed;
        max-width:146px;
                }
             .qid2{
        overflow:hidden;
        table-layout:fixed;
        max-width:92px;
                }

  <table border=1 id="vidtbl">
    <tr>
    <th>Question No</th>
    <th>Video</th>
    <th>Audio</th>
    <th>Image</th>
    </tr>
    <tr>
    <td class="qid2"></td>
    <td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
    <td class="audio">hello</td>
    <td class="image"></td>
    </tr>
    </table>

Ответы [ 4 ]

1 голос
/ 21 ноября 2011

Вы можете обернуть содержимое

в другой тег с шириной и переполнением: скрыто.Например: 
<table>
  <tr>
    <td class="fifty">
      <p>Lorem ipsum dolor</p>
    </td>
  </td>
</table>

И CSS: 

.fifty p { overflow:hidden; width:50px; }
0 голосов
/ 21 ноября 2011

попробуйте использовать 

max-width:100px;

или 

max-height:100px;

Это позволит вашему столбцу максимально расшириться до заданной вами ширины.

0 голосов
/ 21 ноября 2011

Если установка ширины td на фиксированное значение не работает для вас: 

<td width="100">..</td> or <td style="width:100px">...</td>

Обернул содержимое в div и установил переполнение как скрытое: 

<td><div style="width:100px;overflow:hidden;">...</div></td>

Класс Css будет намного эффективнее и прост в обслуживании: 

.col120 { width:120px; overflow:hidden;}

<td><div class="col120">content...</div></td>
0 голосов
/ 21 ноября 2011

Вы можете использовать атрибут width в теге td 

<td width="100px">

, или вы можете использовать атрибут style 

<td style="width:100px">

, или вы можете определить его в файле css 

.tdstyle{
    width:100px;
}

и укажите класс в теге td 

<td class="tdstyle">
...