Creating a two-column table in JqueryMobile

Looking to create a responsive table with 2 columns using jquery mobile.

I tried aligning one column to the left and the other to the right, but instead, both columns appeared stacked vertically.

Is there a way to display a 2-column table with proper alignment on mobile devices using responsive design? I want the left cell to appear on the left and the right cell on the right, in a normal table layout without stacking. (the web app uses jqm)

<div data-role="main" class="ui-content">
<table style="width:100%" data-role="table" class="ui-responsive">
  <thead>
    <tr>
      <th data-priority="1" style="text-align:left"></th>
      <th data-priority="1" style="text-align:right"></th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">1</td>
      <td style="text-align:right">Alfreds Futterkiste</td>

    </tr>

  </tbody>
</table>
htmlcsstwitter-bootstrapjquery-mobileresponsive-design

Answer â„–1

Simply delete the data-role=table attribute:

Check out this DEMO

<table id="MyTable" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th class="left">Col 1</th>
            <th class="right">Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="left">Row 1 Col 1</td>
            <td class="right">Row 1 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 2 Col 1</td>
            <td class="right">Row 2 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 3 Col 1</td>
            <td class="right">Row 3 Col 2</td>
        </tr>
        <tr>
            <td class="left">Row 4 Col 1</td>
            <td class="right">Row 4 Col 2</td>
        </tr>                
    </tbody>
</table>

#MyTable {
    width: 100%;
}
#MyTable .left {
    text-align: left;
}
#MyTable .right {
    text-align: right;
}

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

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

javascriptjqueryhtmlcss

How can I find the last element that was selected using XPath in the browser console

Need help with XPath: $x(("//div[@class='ag-header-row']))[1] I'm working with an array of divs, but I want to select the last one. The [1] is necessary due to multiple rows with this class. I’ve heard about using [last()], but unsure w ...

javascripthtmlxmlseleniumxpath

Modifying the appearance of a WordPress website with CSS styling

I am currently using WordPress and I am excited about making changes to the CSS style sheet. After visiting , I realized that there is no option for editing the 'CSS' under Appearance → Customize → 'CSS'. My usual process is going ...

csswordpress

Ensure that both tables contain columns of equal size

I am facing a challenge with 2 HTML tables that are positioned directly on top of each other. Each table has the same number of columns, however, the text within them may vary. Additionally, both tables can consist of multiple rows. My goal is to ensure th ...

htmlcss

Adjust the left and right margins while maintaining the vertical margin spacing

Is there a way to apply horizontal margin while inheriting vertical margin without explicitly setting margin-left and margin-right? I was hoping for something like margin: inherit 20px; to be effective. Take a look at the example here: https://jsfiddle.ne ...

csshtmllayoutsass

Use jQuery or Javascript to transform URLs within paragraphs into clickable hyperlinks

As someone who is new to javascript but familiar with jQuery, I've been attempting to utilize the following code to convert instances of www. and http in p tags into clickable links. The issue I'm facing is that while I can implement this code, ...

javascriptjqueryhtml

I am interested in designing a navigation bar with varying background and hover colors for each individual block

I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class. Below is the code for the navigation bar: header ...

htmlcss

What is the best method for showing the name of the card?

I have developed a game using Angular that displays images of cards, but I am facing an issue in showing their names on the screen. At times, it displays the same name for all the cards or even incorrect names. In my TypeScript class 'Paquet', I ...

htmlangulartypescript

Tips for positioning slideshow below header in web design

I am currently working on enhancing the slideshow feature on my website. If you take a look at the image link provided below, you'll notice that the alignment of the slideshow is slightly off on both sides. Despite my attempts to adjust the CSS width ...

htmlcss

A centered Bootstrap navigation bar on a WordPress site

My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) https://i.sstatic.net/vxVv4.jpg ST ...

phphtmlcsswordpresstwitter-bootstrap

Why isn't the input appearing on the succeeding line below?

<label for="email2">Enter Your Email Address</label> <input type="text" name="email2" id="email2" placeholder="example: [email protected]"> <label for="phone2">Phone Number</label> <input type="text" name="phone2" id= ...

htmlcss

Retrieve the content of a different page and store it as a variable using ajax

Is it possible to assign the content of another HTML page to a JavaScript variable? I attempted: var X = $(http://www.website.com/home).html() Unfortunately, this did not work, even though it seemed like a good idea. Can anyone provide guidance on how t ...

javascriptjqueryhtmlajaxweb

Collecting a variety of responses from various clients to gather feedback

I am looking to create a feedback page with various input elements such as textboxes, radio buttons, and checkboxes. How should I store over 40 fields that have different types? Do I need to create a separate field in the database for each of these 40 da ...

c#htmlsqlasp.netasp.net-mvc

Ebook document featuring a dual-column layout

Seeking recommendations for EPUB files that contain two columns. I'm struggling to implement two columns in my CSS file. ...

htmlcssepubibooks

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

javascriptphphtmldatabasecsv

Identifying and categorizing flip switches with jQuery without relying on div elements

Is it possible to have two jQuery flip switches side by side, but only one visible if the screen is too narrow? I've tried assigning different classes to each switch for styling purposes, but it doesn't seem to work correctly. When I assign a cl ...

jqueryhtml

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

Retrieve the value of a data attribute from a button when it is clicked

I am struggling to display the information from <div id="data"> <button data-toggle="modal" data-toggle="tooltip" data-placement="top" style="margin:5px; data-SenEmail="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

jqueryhtmlbootstrap-4

Automate: Traverse hyperlinks within a div container

Is there a way to make Mechanize follow links (br.follow_link) that are located inside a specific div in the most pythonic way? I am familiar with using BeautifulSoup for this purpose, but can it be achieved solely with Mechanize? Here is an example of th ...

pythonhtmlmechanize

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

htmlcssflexbox