html tables cannot be aligned row by row

I am attempting to display messages row by row and then show a text box for input to send a message. The issue I am facing is that I can display the messages row by row, but the text box appears next to the displayed messages horizontally rather than at the bottom of the page. Here is an image showing the unexpected result: https://i.sstatic.net/8yMfm.png

Additionally, I need to display incoming messages on the left and outgoing messages on the right side.

<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <table>
        <tr>
          <td bgcolor="#CCFFEE">
            test() blah,blah,blah 2016-08-12 04:44:20
          </td>
          <td>
            <img src="" alt="Smiley face" height="80" width="80">
          </td>
          <td></td>
          <td></td>
          <tr>
            <tr>
              <td bgcolor="#CCFFEE">
                test() Hi 2016-08-12 04:43:16
              </td>
              <td>
                <img src="" alt="Smiley face" height="80" width="80">
              </td>
              <td></td>
              <td></td>
              <tr>
      </table>
      <br/>
      <br/>
      <table>
        <form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
          <tr>
            <td>
              <input type="text" id="body" name="body" style="width:700px;height:50px;">
            </td>
            <td>
              <button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
            </td>
          </tr>
          <br>
        </form>
      </table>
    </div>

htmlcss

Answer №1

To make a <td> wider than the other one, use display: inline-table, followed by float:right; and float:left. If needed, utilize colspan. Explore various properties and attributes in the example below:

EXAMPLE

.msg {
  display: inline-table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 50%;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.input {
  width: 100%;
}
img {
   display: block;
   padding:0 80% 0 0;
   margin: 0 auto 0 0;
}
<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
        <table class='left msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80"><br>
                </td>

                <tr>
        </table>
        <table class='right msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
                </td>

                <tr>
        </table>
        <table class='input msg'>

          <tr>
            <td colspan='5'>
              <input type="text" id="body" name="body" style="width:100%;height:50px;">
            </td>
            <td>

              <input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
            </td>
          </tr> 


        </table>

      </form>
    </div>
  </div>
</div>

Answer №2

When utilizing Twitter Bootstrap, make sure to

Add the following code snippet just before

<table>
    <form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
        <tr><td><input type="text" id="body" name="body" style="width:700px;height:50px;"></td>
            <td><button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button></td>
        </tr><br>
    </form>
</table>

Answer №3

Styling with CSS:

<pre>
table,
tr {
    width: 100%;
}
</pre>

Answer №4

If you find the table to be unnecessary, consider utilizing flex-box

The benefits of using flexbox will become clear when you run the code snippet below. It offers more customization options, such as in my html code where the image is positioned before the message. However, in the output for sent messages, the image appears after the message.

.row{
  display: flex;
  align-items: center;
}
img{
  width: 35px;
}
.reciever{
  justify-content: flex-start;
}
.sender{
  justify-content: flex-end;
}
.sent, .recieve{
  align-items: center;
  display: flex;
  max-width: 50%;
}
.sent{
  flex-direction: row-reverse;
}
form{
  padding: 1em;
  text-align: center;
}
input{
  width: 85%;
  height: 20px;
}
button{
  height: 25px;
}
<div class="container">
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 1</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 1</span>
</div>
</div>
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 2</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 2</span>
</div>
</div><div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 3</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 3</span>
</div>
</div>
<form action="">
<input type="text" >
<button>Submit</button>
</form>
</div>

For a functional demonstration, click this Demo

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

Personalized HTML Input Field for Digital Keyboard Scores

As a new JavaScript beginner, I have experimented with various approaches in an attempt to create a website that features a digital piano experience without the actual instrument. My goal is to develop a platform where pressing multiple keys together will ...

javascripthtmlcss

AngularJS Ng-Repeat not looping through elements within $Scope

I'm currently attempting to retrieve a Json array of objects from my Employees API, and here is what is being returned: [ { "Id": "00162c3a-2b70-4f50-80e8-6fee463cffdb", "EmployeeNumber": 123, ...

javascripthtmljsonangularjsangularjs-ng-repeat

React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn& ...

cssreactjsreact-bootstrap

What is the most effective method to horizontally center a div element when its width and height are not predetermined

Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...

htmlcsscss-expressions

Issue with JavaScript focus not functioning properly

Why is the Javascript focus not working in the following code snippet? HTML <div class="col-md-6" style="border:none; margin-top:2px; padding-right:5px"> <input type="text" id="edtunt" ng-model="Unit" class="form-control" placeholder="Edit ...

javascripthtmlangularjsfocus

Validating Forms using JQuery

I am currently working on a jQuery AJAX code to validate specific fields in an HTML form before submission. If any errors occur during validation, I want the error message to be displayed in a div with the ID "response." However, the code doesn't seem ...

jqueryhtmlajax

Align a Bootstrap 4 container column both vertically and horizontally on top of a background image

After searching the internet for 5 hours, all I found was that each child of the column would line up horizontally. I included the nav bar as it sometimes interferes with the layout. <header> <nav class="navbar navbar-expand-lg navbar-dark bg ...

htmlcssflexboxcss-positionbootstrap-4

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

javascriptjqueryhtmlcss

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

Ways to retrieve the content of a text box within a cell

Here is the code snippet I am currently working with: <tr val='question'> <td> <input style='width: 500px' type='text' placeholder='Q.Enter your question here for radio button? '> </ ...

javascriptjqueryhtml

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...

cssangularjstwitter-bootstrap

Broaden the default className attribute of the component

Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration. B ...

javascriptcssreactjsreact-bootstrapbootstrap-5

"Access denied: Resteasy and ajax do not support this method (error

Encountering a login problem, although registration is functioning smoothly. Tech stack - HTML/AJAX/JQuery->Resteasy (Wildfly 10.1.0 Final) The URL - https://www.test.com/login.html - (actual URL name altered) Upon submitting the form with method type ...

htmlajaxresteasywildfly-10

Unique backgrounds with varied images on each grid block

Hi there! I'm currently exploring options to display different images for each section of a grid I've put together: Take a look at the CSS I'm using: background-image: url("my_image.jpg"); background-size: 50px auto; float: right; height: ...

javascriptjqueryhtmlcss

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

I am currently working on my NextJs app, where I'm utilizing CosmicJs as a headless CMS to showcase content on the webpage. Within the layout of my page, I have structured it with 3 columns, and the content pulled from the CMS is meant to be displaye ...

cssreactjsnext.jsflexboxcosmicjs

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

When a <select> tag is included within a <div> tag, it will not be submitted as part of a <form

I'm experiencing an issue with my HTML structure. Here is the code snippet: <form> <div> <select name="selectbox"> <option>option 1</option> </select> </div> </form> After su ...

htmlsubmit

Can you designate a specific Google font for each language on a webpage?

Is there a way to use two different Google fonts, one for English characters and another for Thai characters, on a single page? While it's possible to achieve this using the @font-face syntax by specifying unicode character ranges, Google fonts do no ...

cssunicodegoogle-fonts

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

javascripthtmlwysiwygwysihtml5

What is the process for configuring my CSS and JS files to send HTTP response headers?

During our security evaluation of a web application built in Laravel 4, we discovered that the Anti-MIME-Sniffing header X-Content-Type-Options was not properly configured to 'nosniff'. The following PHP code snippet sets the necessary HTTP heade ...

javascriptphpcsshttphttp-headers