Row hight changes when i change table name (ID) from example
Row hight changes when i change table name (ID) from example
JonasP
Posts: 5Questions: 2Answers: 0
I use this great table but somehow the row height gets bigger when i change the TableID from example.
What am I doing wrong? (I realy lack experience of JavaScript)
<!DOCTYPE HTML>
<html lang="sv-se">
<head>
<meta http-equiv="Content-type" content="text/html; charset="iso-8859-1">
<title>Brf Info</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="source-url" content="">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="copyright" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<style type="text/css" class="init"></style>
<link rel="stylesheet" type="text/css" href="Styles/Main2017.css" />
<script type="text/javascript" language="javascript" src="JavaScript/JavaScript.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" class="init" language="javascript">
$(document).ready(function() {
$('#foretaglista').DataTable({
stateSave: true,
order: [],
columnDefs: [{bSortable: false, targets: [4]}],
lengthMenu: [ 25, 50, 100, 150 ],
language: {
"sEmptyTable": "Tabellen innehåller ingen data",
"sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
"sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
"sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
"sInfoPostFix": "",
"sInfoThousands": " ",
"sLengthMenu": "Visa _MENU_ rader",
"sLoadingRecords": "Laddar...",
"sProcessing": "Bearbetar...",
"sSearch": "Sök:",
"sZeroRecords": "Hittade inga matchande resultat",
"oPaginate": {
"sFirst": "Första",
"sLast": "Sista",
"sNext": "Nästa",
"sPrevious": "Föregående"
},
"oAria": {
"sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
"sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
}
}
});
} );
</script>
</head>
<body>
<div id="AreaMainPage">
<table data-page-length='50' id="foretaglista" class="table table-sm table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th style="background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));">Namn</th>
<th width="240" style="background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));">Adress</th>
<th width="110" style="background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));">Ort</th>
<th style="background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));">Verksam</th>
<th width="40" align="center" style="background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));">Ny flik</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Namn</th>
<th>Adress</th>
<th>Ort</th>
<th>Verksam</th>
<th>Ny flik</th>
</tr>
</tfoot>
<tbody>
<% Do until RS.EOF %>
<tr>
<td><a class="Link" href='ForetagView.asp?ForetagId=<% = RS("ForetagId")%>' title="Visa"><%= RS("ForetagNamn") %></a></td>
<td><%= RS("BesoksAdr") %></td>
<td><%= RS("BesokOrt") %></td>
<td><%= RS("Geografverksam") %></td>
<td align="Center"><a id="PicVisa" href='ForetagView.asp?ForetagId=<% = RS("ForetagId")%>' title="Visa" target="_blank">Visa</a></td>
</tr>
<%
RS.MoveNext
loop
%>
</tbody>
</table>
</div>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Can you link to a page showing the issue please. We'll need to be able to inspect the CSS.
Allan
Here is with foretaglista
http://www.hittabrf.se/brfinfo2014_labb/DataTables_test.html
and with example
http://www.hittabrf.se/brfinfo2014_labb/DataTables_test2.html
Jonas
Found this in
Main2017.css. I think this is reducing the height of the#exampletable.Kevin