How to anchor a to the lower left of a table cell without destroying responsiveness?

问题

The short of it is that, in a table, on a responsive web page, I added a <div> within the <td>s and anchored it to the bottom left of the cell by putting position: relative on the <td> and

position: absolute;
bottom: 0;
left: 0;

on the <div>.

That seems to have broken the page's responsiveness. Now, there is horizontal overflow scrolling on the whole page at a breakpoint of about 1260px. Above that width, the page is fine; below that point, the horizontal overflow scrolling appears.

I need a CSS/jQuery solution to anchor the <div> to the table cell's lower left cornor without destroying the page's responsiveness. What I'm looking for is something like float: left; and float: bottom; together.

I tried making the <td> display: flex;, but that forced all the cells into a long column at the left.

My question is two fold:

1) Why was the page's responsiveness disrupted? (I'm learning. I'd like to understand.)

2) How can I achieve the goal of locking the <div> to the lower left and still keep the page responsive?

Currently, a typical <td> looks like this:

        <td id="x0900A">                    <!-- 0900 room A -->
            <p class="classTitle">
            </p>
            <div class="classDescrip">
            </div>
            <p class="instructor">
            </p>
            <p class="gender">
            </p>
            <div class="instructorBio">
            </div>
            <div class="instructorImg">
            </div>
            <div id="x0900A-roomCount" class="roomCount">
            <p id="x0900A-attending" class="attending">attending</p>
            <p id="x0900A-capacity" class="capacity">capacity</p>
            </div>
        </td>

It has this CSS:

.schedule td {
  position: relative;
}
div[id$=roomCount] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  margin: 10px 10px 0 5px;
  text-align: left;
  opacity: 0.60;
}

That worked to position the roomCount <div> where I want it, but, now, there is horizontal overflow scrolling on the whole page (<body>).

Edit/Update:

I reworked the question, editing out irrlevant information, I'm hoping this shorter, reworked version will get some attention.

回答1:

To be honest I am not 100% sure about what you are asking, however if you don't want the code to overflow add overflow:hidden to the td's element, this way nothing is able to run off screen, also in your code, the html as id = "ect" everywhere but there is not one #etc in your code. Good luck

Edit : sorry for not recognizing the ID, I've just never seen it like that before

来源：https://stackoverflow.com/questions/57048151/how-to-anchor-a-div-to-the-lower-left-of-a-table-cell-without-destroying-respo

标签

jquery