Статус:
Offline
Реєстрація: 14.06.2007
Повідом.: 13581
Реєстрація: 14.06.2007
Повідом.: 13581
у меня тоже вопрос появился 
Сделал таб контрол, в нем таблички (разворачиваются при клике на [+]), проблема в том что в браузере Chrome див tabControlContent отображающий содержимое таба не подстраивает свои размеры под размеры лежащей на нем таблицы. В итоге таблица уезжает далеко вправо прямо через бордюр
В IE размеры дива подстраиваются.
Вобщем хотелось бы чтобы и в хроме подстраивался
В идеале конечно было бы сделать скроллеры внутри дива, чтобы скролировалось содержимое таба, а не весь таб контрол
Сделал таб контрол, в нем таблички (разворачиваются при клике на [+]), проблема в том что в браузере Chrome див tabControlContent отображающий содержимое таба не подстраивает свои размеры под размеры лежащей на нем таблицы. В итоге таблица уезжает далеко вправо прямо через бордюр
В IE размеры дива подстраиваются.
Вобщем хотелось бы чтобы и в хроме подстраивался
В идеале конечно было бы сделать скроллеры внутри дива, чтобы скролировалось содержимое таба, а не весь таб контрол
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Report</title>
<style type="text/css" media="all">
body {
font: 0.8em arial, helvetica, sans-serif;
}
div.Collapsed {
display: none;
}
div.Expanded {
}
#tabControlHeader {
margin: 0;
padding: 0 0 1em 0;
}
#tabControlHeader ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabControlHeader li {
float: left;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
}
#tabControlHeader a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#tabControlHeader a:hover{
background: #ddf;
}
#tabControlHeader li.Selected {
border-color: black;
}
#tabControlHeader li.Selected a{
position: relative;
top: 1px;
background: #f5f5ea;
color: black;
font-weight: bold;
}
#tabControlContent {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
table.TableDiff {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse:collapse;
}
table.TableDiff tr {
border-width: 0px;
padding: 0px;
}
table.TableDiff tr.Even {
background-color: #f5f5ea;
}
table.TableDiff tr.Odd {
background-color: #c5c5ba;
}
table.TableDiff tr.Split {
border-width: 0px;
padding: 0px;
height: 4px;
}
table.TableDiff th {
border-width: 1px;
border-style: solid;
border-color: black;
padding: 0px 8px 0px 8px; /* left/right padding */
background-color: Silver;
color: black;
white-space:nowrap;
}
table.TableDiff th.State {
padding: 0px 20px 0px 4px; /* 4 left/20 right padding */
text-align:left;
}
table.TableDiff td {
border-width: 1px;
border-style: solid;
border-color: black;
padding: 0px 4px 0px 4px; /* left/right padding */
white-space:nowrap;
}
table.TableDiff tr.Even td.Warning {
background: Salmon;
}
table.TableDiff tr.Odd td.Warning {
background: #FF3300;/** #883030;*/
}
table.TableDiff tr.Split td.Split {
border-width: 0px;
}
a.Collapser {
text-decoration: none;
}
</style>
<script type="text/javascript">
function showCollapsedElement(aId, divId)
{
var a = document.getElementById(aId);
var div = document.getElementById(divId);
if (a.lastChild.data == '[+]')
{
a.lastChild.data = "[-]"
div.className = "Expanded";
}
else
{
a.lastChild.data = "[+]"
div.className = "Collapsed";
}
}
function showTab(tabName)
{
var divHeaderName=tabName+"_hdr";
var divContentName=tabName+"_cnt";
var divContent = document.getElementById("tabControlContent");
for (var i = 0; i < divContent.childNodes.length; i++)
{
var div = divContent.childNodes[i];
if(div.id==divContentName)
div.className = "Expanded";
else
div.className = "Collapsed";
}
var tabList = document.getElementById("tabList");
for (var i = 0; i < tabList.childNodes.length; i++)
{
var e = tabList.childNodes[i];
if(e.id==divHeaderName)
e.className = "Selected";
else
e.className = ""; // note: it is applied to <a> tag also
}
}
</script>
</head>
<body onload="showTab('tabModified')">
<h1>Report</h1>
<div id="tabControlHeader">
<ul id="tabList">
<li id="tabModified_hdr"><a href="#" onclick="showTab('tabModified')">Modified</a></li>
<li id="tabAdded_hdr"><a href="#" onclick="showTab('tabAdded')">Added</a></li>
<li id="tabDeleted_hdr"><a href="#" onclick="showTab('tabDeleted')">Deleted</a></li>
</ul>
</div>
<div id="tabControlContent">
<div id="tabModified_cnt">
<div><h4><a class="Collapser" id="a_37af814b-3bc7-4832-97d1-def10f95b2ea" href="#a_37af814b-3bc7-4832-97d1-def10f95b2ea" onclick="showCollapsedElement('a_37af814b-3bc7-4832-97d1-def10f95b2ea', 'div_37af814b-3bc7-4832-97d1-def10f95b2ea')">[+]</a> A_BBBB_CCCCCCCCCCCCCCCCC</h4></div>
<div id="div_37af814b-3bc7-4832-97d1-def10f95b2ea" class="Collapsed">
<table class="TableDiff">
<tbody>
<tr><th/><th>aaaaaaaaaaaaaaa_aaaaaaaa_id</th><th>aaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th><th>aaaaaaaaaaaaaaaaaaaaaaaa</th></tr>
<tr class="Even"><th class="State">Xxxxxx</th><td>281</td><td>xxx xx</td><td>False</td><td>True</td><td>False</td><td></td><td class="Warning">-1</td><td>11</td><td>96</td><td>1</td><td>-65536</td><td>False</td><td>True</td><td>0</td><td class="Warning">80</td><td>0</td><td>True</td><td></td><td class="Warning"></td><td>xxx</td><td>xxx xx</td><td class="Warning"></td><td class="Warning"></td></tr>
</tbody>
</table>
</div>
</div>
<div id="tabAdded_cnt">
{%TABLE_ADDED%}
</div>
<div id="tabDeleted_cnt">
{%TABLE_DELETED%}
</div>
</div>
</body>
</html>
помогите плиз 