Problem with Firefox, scrollX and borders
Problem with Firefox, scrollX and borders
greenflash
Posts: 58Questions: 5Answers: 0
There seems to be a problem with Firefox and scrollX. The code below will cause a horizontal scrollbar to appear in Firefox when none is necessary. It works OK with Chrome. The problem only appears if you put borders on the table or borders on the table cell. When you do that then the table width calculated when using Firefox is too wide by the total width of the borders (ie 2px in the example below). I've tried with the latest nightly build and the problem is still there.
Campbell
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #888888;
}
td, th {
text-align: left;
padding: 0.5em;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
'scrollX': '100%'
});
} );
</script>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Name</th><th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td><td>Auchtermuchty</td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.
Replies
I should also have said that if you put borders on the cells, then Firefox over-calculates the total width of the table by the total width of all the borders (table borders and cell borders).
and
Are just not happy partners. Collapsed borders make it almost impossible to align the columns correctly if two tables have different content (DataTables splits a scrolling table into a header and body table and uses Javascript to set the width of the columns in each table to match). Even if specifically set to identical widths the columns won't align. That is why the DataTables default stylesheet has
border-collapse: separate.Are you in Auchtermuchty? I'm just down the road in Dunfermline :-)
Allan
OK, many thanks. I'll try border-collapse: separate. Looks like that will also solve my other problem of column alignment.
Am in Edinburgh, not Auchtermuchty, so maybe even closer.
Campbell
Nice to have someone local here :-). Let me know how you get on with the border-collapse: separate.
Allan
I've got it working now. However I couldn't put a border directly on the table, but instead had to put a border on the table by putting it on the cells using first-child/last-child.
Campbell