• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

unable to post side by side tables

New Here ,
Aug 16, 2020 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

181

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
community guidelines
LEGEND ,
Aug 16, 2020 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 -->

 

Votes

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
community guidelines
LEGEND ,
Aug 16, 2020 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 -->

 

Votes

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
community guidelines
LEGEND ,
Aug 16, 2020 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> 

 

Votes

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
community guidelines
Community Expert ,
Aug 16, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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