How to make an HTML table with a single cell mobile responsive?-CodePudding

I have a table with a single cell that has a load of paragraph elements in that are underscores (it is basically meant to look like a form hence the underscores).

The structure of the table can't be changed and has to be pure html/css.

This table looks fine on desktop but not on a mobile view and I'm not sure how to fix it so that the underscores fit into the mobile view because currently when I go to mobile view i have to scroll to see this table and I don' want that.

.td {
    margin-bottom: 16px;
    padding-right: 16px;
}

.p {
    position: relative;
    text-align: left;
    display: block;
}

<table>
  <tbody>
    <tr>
      <td>
        <h3><strong>Title</strong></h3>
        <p>name</p>
        <p></p>
        <p>_____________________________________</p>
        <p></p>
        <p>Details</p>
        <p></p>
        <p>
          ___________________________________________________________________________
        </p>
        <p></p>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Try this:

.td {
  margin-bottom: 16px;
  padding-right: 16px;
}

.p {
  position: relative;
  text-align: left;
  display: block;
}

.box-one {
  padding: 10px;
  background-color: gray;
  border-bottom: 1px solid black;
}

.box-two {
  padding: 10px;
  background-color: yellow;
  border-bottom: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        <h3><strong>Title</strong></h3>
        <p>name</p>
        <p></p>
        <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio illum incidunt natus beatae aut itaque harum dolorum quas, in exercitationem? Voluptate ipsum quae consequuntur expedita natus numquam facilis, rem libero illum placeat, tenetur enim
          reiciendis est odit distinctio molestiae minus omnis aliquid dignissimos soluta repellendus non eius? In, quaerat ut.</p>
        <p></p>
        <p>Details</p>
        <p></p>
        <p >
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, impedit magnam. Reprehenderit, eius natus! Suscipit reprehenderit rem repellendus quos obcaecati excepturi eligendi labore dolore quidem, iusto omnis facilis est corrupti veniam vitae,
          a sunt exercitationem laudantium, nisi soluta! Commodi porro necessitatibus minima tenetur, ipsum quam fuga consequuntur recusandae nesciunt quidem!
        </p>
        <p></p>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Add a @media query with a specific width. try implementing the same code and it should work just fine.