jg_shift
-
Posts
2 -
Joined
-
Last visited
jg_shift's Achievements
Explorer (1/14)
0
Reputation
-
TABLE кроссбраузерно выходит за правую границу DIV
jg_shift replied to jg_shift's question in HTML Coding
Потому что ширина таблицы больше, чем блока .main, который равен ширине окна браузера. Поэтому можно либо задать ширину блока = ширине таблицы (явно, либо высчитывать динамически), либо задать .main свойство display: table (IE7 и ниже в пролете), либо display: inline-block, либо float: left. И уберите width: 100%, он тут совершенно лишний. table-layout: fixed - если нужно, чтобы таблица занимала конкретную ширину и/или столбцы были заданной ширины. Спасибо все заработало. А не поскажете почему див не растянулся по контенту? (даже когда width 100% небыло) -
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" не вижу в чем косяк. Опытные люди помогите пожалуйста. Пример: