Create HTML <td> elements that function similarly to Zurb's responsive tables

I am looking to create a table with fixed heights for the <tr> elements, while allowing very long <td> content to be continued within the cell. Something similar to Zurb's Responsive Tables for desktop browsers rather than mobile devices.

<table>
    <tbody>
        <tr>
            <td>Hello</td>
            <td><div>This is a div in a td with a longer text</div></td>
            <td><div>This is aaaaaaaaaaaalso a td with a looong word</div></td>
            <td>Normal sized td</td>
        </tr>
    </tbody>
</table>

This sample demonstrates exactly what I'm trying to achieve: jsfiddle

The date column must retain its small size.

If anyone has any suggestions on how to accomplish this layout without using JavaScript, it would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

Not quite sure what your intentions are, but consider looking into the properties white-space:nowrap and table-layout: fixed.

Your CSS code could resemble something like this:

table {
  table-layout: fixed;  
}    

td {
  overflow: hidden;
  border: 1px solid;
  height: 50px;
  padding: 5px;
  white-space:nowrap;
}

To set a fixed width for <td> elements, you can include width: 30% in the style for <td>.

Answer №2

Check out the following fiddle link for assistance on creating a table similar to the Zurb Responsive Tables. I have made some CSS modifications:

td {
  overflow: hidden;
  border: 1px;   
    border-color:none;
  height: 50px;
  padding: 5px;
  white-space:nowrap;
}

To alternate row colors, you can use the following code:

$("tr:even").css("background-color", "rgb(225,225,225)");
$("tr:odd").css("background-color", "#ffffff");

I trust this information will be useful for your project.

Answer №3

Are you looking to make your content wider horizontally or taller vertically? The previous answers may not have addressed this fully.

  Width:75%;

This will allow the text to expand without breaking onto a new line, creating a more horizontal layout on your webpage.

If you also want to make it wider, you can add:

  Width: [desired amount of pixels or percentage]

In the .css file or within the

  <td width="75%">

I hope this helps clarify things for you.

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

Unable to successfully scroll a webpage using Selenium Webdriver or Javascript Executor

`from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains import time driver = webdriver.Chrome('chromedriver.exe' ...

javascriptpythonseleniumselenium-webdriver

Steps for executing a conditional pop() on an element

Consider this scenario: I have an array and I need to remove a specific element from it. Take the following array for example: arr = [1, 2 , 3, 4, 5] if (value === 3){ arr.pop() // If the value is '3', I want to remove that record from the arra ...

javascriptarrays

What is the best way to remove all HTML tags from post content and only trim the text in PHP?

Currently, I am working on a CMS using Laravel, and my main focus right now is to remove all HTML from the posts. {!! str_limit($post->content, 230) !!} The issue I am facing is that it also includes HTML in the output. I then tried using the Strip_ta ...

phphtmllaravel-5

AngularJS referrer URL functionality allows developers to capture and utilize the

I am working in angularjs and have a controller. Depending on the referrer URL, I need to display a message. Is there a built-in function in AngularJS that can help me achieve this without having to write any extra service? ...

jqueryangularjsreferrer

Viewing HTML files remotely using Kendo UI Mobile

I developed a sample hybrid app using the Telerik App Builder CLI. The project features an initial home screen loaded from a COMPONENTS folder within the project. Within the Components folder, there is a Home folder containing an index.js and view.html fil ...

javascriptkendo-uikendo-mobile

Utilize JavaScript libraries in a TypeScript project

Looking to integrate a payment system called iyzico into my project. The iyzico payment library can be found here. However, there are no types available for it. How can I utilize this library in my Node.js TypeScript Express backend project? I attempted t ...

javascriptnode.jstypescriptexpresstypescript-typings

Best practices for executing an asynchronous forEachOf function within a waterfall function

I've been working with the async library in express js and I'm encountering an issue when using two of the methods alongside callbacks. The variable result3 prints perfectly at the end of the waterfall within its scope. However, when attempting t ...

javascriptnode.jsexpressasynchronous

Replacing the previous observation

My events app features an all-events component that showcases all the events created. Upon loading the all-events component, the events are fetched from the database. Below is a snippet of the relevant code from the Typescript file of the all-events compo ...

htmlangularrxjs

Access-Control-Allow-Origin does not permit AngularJS Origin http://localhost:8080

I'm working on a web application using AngularJS. It's an admin interface that depends on a json-rpc API hosted on a different domain. When testing in my local environment, I encountered the error "Origin http://localhost:8080 is not allowed by ...

javascriptphpangularjs

Items in a scrolling flex container are not properly aligned in the center

HTML: <div id="container"> <div class="item">Foo</div> <div class="item">Bar</div> </div> CSS: #container { display: flex; justify-content: center; overflow: auto; } .item { flex-grow: 1; m ...

cssflexbox

Mapping Objects to Types in Typescript: A Comprehensive Guide

Imagine I have a data object and I want to create a versatile mapper function that can be used for all types without having to instantiate a new class each time, like this: this.responseMapper.map<CommentDTO>(data); The goal is to take the propertie ...

javascriptclasstypescriptobjectmapping

Styling the button in jQuery to switch between disabled and enabled

I'm currently working on creating a disabled/enable button style using jQuery. You can check out my demonstration page on Codepen for reference. In the demo, you'll notice a blue submit button. When you input text into the field, the button bec ...

javascriptjquerycss

Adjusting the height property to zero in the absence of an element

I'm currently working on creating a timeline for changeLogs and populating it with data from an AngularJS controller. The issue I'm facing is that the height of the timeline "Line" is set to 6px. This means that even when there is no data in the ...

angularjscss

Error validation for jQuery div dropdown

Can jQuery validation be used to set the required attribute on a Bootstrap styled div dropdown instead of an option/select tag? The tags cannot be changed on this page, and there are multiple div dropdowns. <div class="btn-group"> <button typ ...

javascriptjquerytwitter-bootstrapvalidation

Injecting universal data into ValidationErrors in Angular

Trying to bind a value into ValidationErrors. Having this method: isUniqueEmail(control: FormControl): ValidationErrors { if (control.value != null) { console.log(control.value) if(control.value == this.foundEmail){ console ...

javascriptangularvalidation

Encountering an error in resolving symbol values statically within the Angular module

Following a helpful guide, I have created the module below: @NgModule({ // ... }) export class MatchMediaModule { private static forRootHasAlreadyBeenCalled: boolean = false; // This method ensures that the providers of the feature module ar ...

javascriptangularangular-module

Tips for identifying the visibility of one element out of two with Selenium

I'm stuck on detecting the visibility of elements in Selenium and could use some guidance. Specifically, I have a search field and a results list, with "No Results Found" displayed if nothing is found. My goal is to determine when either the list is n ...

htmlpython-3.xselenium-webdriver

How can I retrieve information from an HTML or JavaScript object?

Imagine a scenario where you have an HTML table consisting of 5,000 rows and 50 columns, all generated from a JavaScript object. Now, suppose you want to send 50 checked rows (checkbox) from the client to the server using HTTP in JSON format. The question ...

javascriptjqueryhtmljsonhttp

Iterate through the URL parameters and store them in the database

I need to efficiently loop through all my post requests and aggregate them collectively. What is the most effective approach for achieving this? Below is the Form structure along with the data I receive: var Form = new Schema({ title: { type: ...

javascriptnode.jsexpressurlmongoose

Iterating over a column in a table to construct a text string

I'm currently working on a script to iterate through a table column and concatenate the values into a string. Here is what I have written so far: $(".ConvertSQL").click(function () { var values $(".TableQuery tr").each(function () ...

jqueryhtml