TABLE кроссбраузерно выходит за правую границу DIV

jg_shift · June 3, 2011

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

	<title>Список клиентов</title>

	<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

	<link href="/i/css.css" rel="stylesheet" />

	<script src="/i/js.js" language="JavaScript" type="text/javascript"></script>

	<meta http-equiv="Keywords" content="" />

	<meta http-equiv="Description" content="" />

	<link rel="icon" href="/favicon.ico" type="image/x-icon" />

	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

        <link rel="stylesheet" href="/main.css" />

</head>

<body>



select *, (select COUNT(num) from `clients` where 1) as `total` from `clients` where 1 group by `num` LIMIT 0, 50<div class="user_panel"> 
    <em>Администратор</em><a href="/loguot/">выход</a> 
</div> 
<div class="main"> 
<h1>Список клиентов</h1> 
<table class="list_table"> 
    <thead> 
        <tr> 

            <th></th> 
            <th>Номер п/п</th> 
            <th>Компания</th> 
            <th>Полное название</th> 
            <th>Сайт</th> 
            <th>Почтовый адерс</th> 
            <th>Индекс</th> 
            <th>Имя</th> 
            <th>Фамилия</th> 
            <th>Отчество</th> 
            <th>Должность</th> 
            <th>Емэйл</th> 
            <th>Пол</th> 
            <th>Телефон 1</th> 
            <th>Телефон 2</th> 
            <th>Акция</th> 
            <th>Комментарий</th> 
            <th>Откуда</th>
            <th>Статус</th> 

        </tr> 
    </thead> 
    <tbody> 
<tr><td><input type="checkbox" name="client[]" value="1" /></td> 
<td>1</td> 
<td> Gondol</td> 
<td>Н/Д</td> 
<td>йцуйцуйцуйцуйц йц уйцуйц уйцу...</td> 
<td>  </td> 
<td>Н/Д</td> 
<td>Н/Д</td> 
<td>Н/Д</td> 
<td>Н/Д</td> 
<td>  </td> 
<td>й123123 1 23 123123 </td> 
<td>Н/Д</td> 
<td> 123123123 23 12 3123 12 3</td> 
<td>  </td> 
<td> asdasdasdasa as s da ds </td> 
<td>Н/Д</td> 
<td>Н/Д</td> 
<td>Н/Д</td> 
<td>1</td> 
</tr> 
</tbody> 
</table> 
</div>

</body>

</html>

И CSS


/*
DEVASTATE DEVIATIONS
*/
html, body, div, img, table, tbody, tr, td, input, br, ul, ul, li{ margin: 0; padding: 0; border: none;}

body{
     font-family: Helvetica;
}

h1{
    text-align: center;
}

.login_form
{
    margin: 0 auto;
    margin-top: 100px;
    width: 300px;
    padding: 10px;
    border-radius: 15px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    box-shadow:5px 5px 10px 0 #555555;
    -webkit-box-shadow:5px 5px 10px 0 #555555;
    -moz-box-shadow:5px 5px 10px 0 #555555;
}

.login_form input
{
    border: 1px solid #ccc;
}

.login_form input[type="submit"]
{
    margin-top:10px;
    padding: 5px 20px;
}

.login_form input[type="submit"]:hover
{
    background-color: #efe0e0;
}

.error_code
{
    color: #f90000;
    font-size: 10px;
}

.user_panel
{
    border: 1px solid #ccc;
    background-color: #e0e0e0;
    padding: 10px;
    height: 30px;
    width: 100%;
}

.user_panel em
{
    font-weight: bold;
    color: #00008d;
    margin-right: 20px;
}

.main
{
    border: 1px solid #aaa;
    background-color: #efefef;
    margin: 10px;
    padding: 5px;
    width: 100%;
}

.list_table
{
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    /* ->^.^<- */
    border-collapse: collapse;
}

.list_table tr td
{
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    padding: 5px;
}

.list_table tr:hover
{
    background-color: #f0e0e0;
}

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

Пример:

Azadi · June 3, 2011

Слишком дофига контента в таблице? Извечная проблема, да. Решить можно по-разному, но для пользователя будет одинаково плохо. Варианты:

Разбить таблицу на несколько.
Обёртывающий div с overflow-y:auto; и width:100%;
table-layout:fixed; для таблицы.

Лично мне нравятся первые 2 варианта.

sigma77 · June 3, 2011

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

Потому что ширина таблицы больше, чем блока .main, который равен ширине окна браузера.

Поэтому можно либо задать ширину блока = ширине таблицы (явно, либо высчитывать динамически), либо задать .main свойство display: table (IE7 и ниже в пролете), либо display: inline-block, либо float: left. И уберите width: 100%, он тут совершенно лишний.

table-layout: fixed - если нужно, чтобы таблица занимала конкретную ширину и/или столбцы были заданной ширины.

jg_shift · June 3, 2011

Во всех браузерах выходит таблица за правый край дива ".main" не вижу в чем косяк. Опытные люди помогите пожалуйста.
Потому что ширина таблицы больше, чем блока .main, который равен ширине окна браузера.
Поэтому можно либо задать ширину блока = ширине таблицы (явно, либо высчитывать динамически), либо задать .main свойство display: table (IE7 и ниже в пролете), либо display: inline-block, либо float: left. И уберите width: 100%, он тут совершенно лишний.
table-layout: fixed - если нужно, чтобы таблица занимала конкретную ширину и/или столбцы были заданной ширины.

Спасибо все заработало.

А не поскажете почему див не растянулся по контенту? (даже когда width 100% небыло)

sigma77 · June 3, 2011

А не поскажете почему див не растянулся по контенту? (даже когда width 100% небыло)

Потому что по-умолчанию ширина блока (display: block) устанавливается как auto и стремится занять всю ширину родителя. Самый старший родитель - html, ширина, которого = ширине окна браузера.

Developer Yii · March 16, 2017

On 03.06.2011 at 12:00, Azadi said:

Слишком дофига контента в таблице? Извечная проблема, да. Решить можно по-разному, но для пользователя будет одинаково плохо. Варианты:

Разбить таблицу на несколько.

Обёртывающий div с overflow-y:auto; и width:100%;

table-layout:fixed; для таблицы.

Лично мне нравятся первые 2 варианта.

Офигенско!! У меня сработало даже с переделанным бутстрапом. нереальный респект :))))))))))))))))))))))))))

Sign In

TABLE кроссбраузерно выходит за правую границу DIV

Question

jg_shift

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Azadi

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

jg_shift

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Developer Yii

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information