My table's CSS is giving me trouble, despite my attempts to fix it.
You can see that the table is currently positioned outside of my div.
What I want:
The table needs to be contained within my "Logs" div.
I believe displaying the data in one line will solve the issue:
<table class="blueTable table-striped table-bordered" id="blueTable" style="white-space:nowrap;width:100%;">The "Logs" div should be centered on the screen, as the table starts too far to the right.
Here is an image with a sample of the data
I am using the dataTable plugin for my table
https://i.sstatic.net/glky9.png
My current CSS code:
table.blueTable {
font-family: "Lucida Console", Monaco, monospace;
border: 4px solid #555252;
background-color: #E8E8E9;
text-align: center;
border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
border: 1px solid #555555;
}
// Other CSS rules...
<main role="main" class="container">
<div class="card" style="width:100%">
<div class="card-header">
<h3 class='text-center'><i class="fab fa-reddit mr-2"></i>Logs</h3>
</div>
// Table structure and PHP code...
</div>
</main>
// JavaScript scripts...