unable to post side by side tables

Report · Aug 16, 2020

I have been trying for hours to get 2 tables with 2 colums and 7 rows side by side in Boostrpa Dreamweaver and have not been able to get them to do that. I was able to do this on a diferent website, however for some reason I can't any longer.

Just so you know my computer had to be fixed about 2 weeks ago was it wasn't powering on. Since it came back I have been having some difficulties with Bootstrap.

I would appreciate any assistance. Thank you

Report · Aug 16, 2020

In Bootstrap create a two column layout and insert a table in each column:

<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<table class="table table-striped table-bordered w-100">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end col-md-6 -->

<div class="col-md-6">
<table class="table table-striped table-bordered w-100">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end col-md-6 -->
</div>
<!-- end row -->
</div>
<!-- end container-fluid -->

Report · Aug 16, 2020

I guess you could also use flex to place the tables side-by-side (see code below):

You will have to create your own table width though as Bootstrap seems to be a bit 'short' on w- helper classes... I'm sure a few more would have been helpful rather than just 25% - 50% - 75% - 100%.

.w-40 {
width: 40%;
}
@media (max-width: 768px) {
.w-40 {
width: 80%;
}
}

<div class="container-fluid">
<div class="row flex-md-row flex-sm-column justify-content-md-center align-items-sm-center">
<table class="table table-striped table-bordered w-40 mx-md-3 mx-auto">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>



<table class="table table-striped table-bordered w-40 mx-md-3 mx-auto">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>

</div>
<!-- end row -->
</div>
<!-- end container-fluid -->

Report · Aug 16, 2020

You could just as easily create this without all the Bootstrap inline css stuff. My preferred way of working as all the css is in one place and simply organised and less clutter in the actual html mark-up.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>Tables Side-By-Side</title>
<style>
body {
font-family: helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.table-wrapper {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
.table {
width: 48%;
border-collapse: collapse;
border: 1px solid #ddd;
margin: 1%;
}
.table th {
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}
.table td {
padding: 15px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
@media (max-width: 768px) {
.table {
width: 100%;
}
}

</style>
</head>
<body>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>



<table class="table">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end table-wrapper -->
</body>
</html>

Report · Aug 16, 2020

Tables are rarely used anymore. I avoid using them if at all possible because they aren't responsive.

When Dreamweaver acts up, it's often caused by coding mistakes. The solution is to work with valid, error-free code.

https://validator.w3.org/

https://jigsaw.w3.org/css-validator/

If that doesn't fix the problem, Restore Preferences.

https://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver.html

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 17, 2020

'Tables are rarely used anymore. I avoid using them if at all possible because they aren't responsive'.

A 2 column table will be responsive (its narrow) as long as the 2nd table is stacked beneath the 1st table for mobile devices. Tables with many columns cause issues and need more consideration and thought.