Highlighted

unable to post side by side tables

New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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

Views

65

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

unable to post side by side tables

New Here ,
Aug 16, 2020

Copy link to clipboard

Copied

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

Views

66

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 16, 2020 0
LEGEND ,
Aug 16, 2020

Copy link to clipboard

Copied

 

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 -->

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 1
LEGEND ,
Aug 16, 2020

Copy link to clipboard

Copied

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 -->

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
LEGEND ,
Aug 16, 2020

Copy link to clipboard

Copied

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> 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
Adobe Community Professional ,
Aug 16, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2020 0
osgood_ LATEST
LEGEND ,
Aug 17, 2020

Copy link to clipboard

Copied

'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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 17, 2020 0