The table inside the div exceeds the boundaries of the container when in responsive mode

I am facing an issue where my table, located inside a div, is not properly aligned in responsive mode. The table extends outside the boundaries of the div container, causing layout issues.

https://i.sstatic.net/94reM.png

My goal is to center the table within the div container during responsive mode, ensuring that it looks like this:

https://i.sstatic.net/mOijc.jpg

Currently, as the screen width decreases, the table fails to align closely enough to the left side of the container. I want to prevent the table from spilling out of the container boundary.

Can anyone provide guidance on how I can achieve this?

.slice-table {
  vertical-align: middle;
  display: block;
  cursor: pointer;
  cursor: hand;
}
.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
}
.spacer-20 {
  font-size: 0;
  height: 20px;
  line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="st-container">
  <div class="st-content" id="content">
    <div class="st-content-inner">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-7">
            <div class="panel panel-default">
              <div class="panel-body">
                <!-- Progress table -->
                <div>
                  <div class="inner">
                    <table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>

</tr>

</table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

Have you considered including the following CSS code in your div.inner element: 

overflow-x: auto;

This may help achieve what you are looking for in terms of design. Your complete CSS snippet would look similar to this: 

.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
  overflow-x: auto; // Creates a scrollbar when table exceeds container size.
}

I also added an additional cell for demonstration purposes. 

.slice-table {
  vertical-align: middle;
  display: block;
  cursor: pointer;
  cursor: hand;
}
.inner {
  width: 50%;
  margin: 0 auto;
  font-size: 6px;
  color: #FFFFFF;
  overflow-x: auto; 
}
.spacer-20 {
  font-size: 0;
  height: 20px;
  line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="st-container">
  <div class="st-content" id="content">
    <div class="st-content-inner">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-7">
            <div class="panel panel-default">
              <div class="panel-body">
                <!-- Progress table -->
                <div>
                  <div class="inner">
                    <table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
  <td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td>

</tr>

</table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Optimize your image display using the img-responsive class:

<!DOCTYPE html>
<html>
<head>
    <style>
        .slice-table {
            vertical-align: middle;
            display: block;
            cursor: pointer;
            cursor: grab;
        }

        .inner {
            width: 50%;
            margin: 0 auto;
            font-size: 6px;
            color: #FFFFFF;
        }

        .spacer-20 {
            font-size: 0;
            height: 20px;
            line-height: 0;
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>

    <div class="st-container">
        <div class="st-content" id="content">
            <div class="st-content-inner">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <!-- Progress table -->
                                    <div>
                                        <div class="inner">
                                            <table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td colspan="38">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
                                                    </td>
                                                    <td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
                                                    <td rowspan="5">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
                                                    </td>
                                                    <td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
                                                    <td colspan="27">
                                                        <img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
                                                    </td>
                                                    <td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
                                                    <td rowspan="48">
                                                        <img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
                                                    </td>
                                                    <td>
                                                        <img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

htmlrubyxmljekylljekyll-bootstrap

The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class. Even when I use the :not selector for this div like so .main .content .index-exp .img:not(.view-image){ /*rest*/ } it continues to affect my div. You can view the issue at this link. Is this ...

htmlcsscss-selectors

binding swipe action to click event

I am utilizing images from a database and implementing next and previous buttons for pagination. What I aim to do is connect the click events of these buttons to swipe actions, so that swiping from right to left triggers the next link, while swiping from l ...

jqueryhtmlajax

Ways to position a button at the bottom of a div and beneath an image

Hey there, I have a little issue that seems to be causing me trouble. My brain just can't seem to come up with the solution. Here's the HTML code: #div { position: fixed; top: 10%; left: 20%; right: 20%; bottom: 10%; ...

htmlcss

The toggle feature in jQuery doesn't hide content in the same manner as it was originally shown

Just diving into the world of jquery and I'm experimenting with the toggle function to display and hide a div, along with adding or removing an active class. http://jsfiddle.net/MAkyw/ I've encountered 2 issues: 1) The 'active' class ...

jqueryhtmlcss

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

Experiencing difficulties connecting external CSS files

After rekindling my interest in web design, I decided to test my skills and see how much I remembered. However, I encountered an issue while trying to link my external CSS to the HTML document. Even after making the connection, I went back to the CSS docum ...

htmlcss

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...

javascripthtmlcssiframecross-domain

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...

htmlcss

Alter the background color upon clicking using ng-click

I am a beginner in using Angular, and I am currently working on a CodePen project. My goal is to change the background color of another div based on the color of the button clicked by the user at the bottom navigation. However, I am uncertain about the bes ...

javascriptjqueryhtmlcssangularjs

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

How can we initiate a script once the scroll has reached the designated block using jQuery?

I am using a unique jQuery script that I created myself, and I want it to activate when the scroll reaches the tab block (the blue and grey block at the end of the page). Check out the live version This is my HTML: <section id="Block" class="containe ...

javascriptjqueryhtmlcss

Is it possible to load a text file using $.get() in jQuery and have it work in Internet Explorer but not in Google Chrome or Firefox?

Having an issue with loading a relatively large text file into an array using jQuery. Surprisingly, when I view the page in Internet Explorer, the array loads perfectly fine - I can access any element within it without any problems. However, when I try to ...

javascriptjqueryhtmlarraysgoogle-chrome

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

javascripthtmlcordova

Navigating through Ajax load selector

I am attempting to implement an 'infinite scroll' feature using Ajax (specifically utilizing Jquery's .load function). The function triggers successfully, but in cases where it works, it generates a large number of articles. To address this ...

javascriptjqueryhtmlajaxinfinite

Why is there a blank white space under my image in Safari?

I am struggling to understand why Safari is adding a white space at the bottom of the image on my current website project. Interestingly, Firefox and Chrome display it correctly. The image should stay fixed at the bottom of the page even when resized. He ...

javascriptjqueryhtmlcsssafari

Tips for preventing my text from disappearing off the screen when I resize it

Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...

htmlcssbootstrap-5

Eliminate the "::before" CSS styling

https://i.sstatic.net/zTBhR.png The header of my blog post on blogger currently has a unwanted "-" element that I would like to remove. This element is created using a ::before in the CSS. I followed advice from this source and attempted to add the followi ...

htmlcssblogger

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

javascriptjqueryhtmlcss

encountering a problem with loading an image

I'm experiencing a strange issue when trying to load a sprite image and encountering an error message: "Failed to load resource: the server responded with a status of 404 (Not Found)" In my CSS, I have it loaded like this: background-image: url(&ap ...

asp.netcss