Chrome not handling text wrapping within table cells properly

I'm facing an issue with a table I created using the bootstrap stylesheet. For some reason, the cells are not wrapping correctly in Chrome, although they display perfectly fine in IE and Firefox. You can check it out here:

  <form action="todos" method="post">
                    <table class="table" border="1"> // This is a standard table styled with bootstrap
                        <thead>
                            <tr>
                                <th>asdf</th>
                                <th>asdf<th>
                             ...
                            </tr>
                        </thead>
                        <tbody>

                        <tr>
                          ...
                       </tbody>

Does anyone have any insight on what might be causing this issue?

htmlcsstwitter-bootstraphtml-table

Answer №1

From the appearance of it, the use of word-wrap: break-word; seems to be the issue. You may want to consider setting:

table td {
    word-wrap: normal;
}

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

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Is there a method to add a border around a specific table row?

Trying to add borders around specific table rows that change colors when the mouse hovers over them. However, borders are not visible unless using border-collapse:collapse;. I need to avoid border-collapse because it causes issues with visibility at the to ...

htmlcsshtml-table

What is the best way to display a collection of square Views in a FlatList in a react native application?

How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes? Which CSS properties in react-native are necessary to achieve square shapes for each <Item/& ...

cssreact-native

An HTML form featuring two unique submit style buttons designed for triggering two separate PHP actions or files

I'm facing a challenge with my HTML file upload form that sends files to a database using PHP. The current setup allows users to upload a file, preview the data in an HTML table, and then submit it to the database. However, I need to merge the preview ...

phphtmlsqlpost

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

javascriptjqueryhtmlcssjquery-plugins

Converting the Google logo to grayscale for the Google Translate button

Is there a simple way for a non-coder like myself to change the colors of the Google Logo in the Google Translate Button to grey scale instead of its usual bright shades? Below is the embed code I am using: <div id="google_translate_element"></di ...

htmlembedgoogle-translate

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

htmlcss

Group input with segmented buttons (Bootstrap 4 alpha version)

In Bootstrap 4's input-group dropdown arrow is displayed under action button: https://i.sstatic.net/eGzcb.png <div class="container"> <div class="input-group"> <input type="text" class="form ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

phphtmlcsslaravelvue.js

What is the best way to line up two forms side by side?

Looking to create a login view for a webpage with two forms (one for registration and one for login) aligned side by side. Initially attempted using a table, then tried using bootstrap form groups (rows and cols) without success. Finally, aligned them in t ...

htmlcss

When Axios is disconnected, the sequence of events following a user's action is no longer dependent on when it is called after a button

I am working on a script that performs the following actions: Upon clicking a button, an encoded text is sent to an API for decoding. The decoded text is then used as a query for a Google search link that opens in a new tab. JAVASCRIPT // Summary: // ...

javascriptjqueryajaxhtmlaxios

Accessing an image from a directory using Javascript

I have a simple question that I need help with. In my code, I currently pull images from a website using this syntax: icon: 'http://i45.tinypic.com/2yua8ns.png'. However, I would like to use something like this instead: icon: '\images/i ...

javascripthtmlcss

Tips for deleting "Category: [category name]" in Wordpress

I have attempted various solutions found in previous threads, but none of them seem to work for me. Here is a screenshot I am looking to remove the text from the header in the category and only display [category name]. Can anyone assist me with this, ple ...

phpcsswordpressheadercategories

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

After finally resolving some of the Javascript issues I was facing, I have streamlined my code to utilize just one library now, which is a huge improvement from how chaotic it was before. However, I have noticed a slight delay in the page load time, and I ...

javascriptjqueryhtmlaudiolightbox

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

htmlcssangularjsionic2hybrid-mobile-app

Conceal a div once the user scrolls to a certain position using vanilla JavaScript

As a beginner in the field of web development, I am currently working on creating a blog website. Code Function - One of the challenges I'm facing is implementing a floating pagination bar that needs to be hidden when a visitor scrolls near the foote ...

javascripthtmlcssbootstrap-4

What is the solution for the error "At-rule or selector required" ?

Can someone help me with my CSS code issues? I'm having trouble on the first and last lines. Total newbie here :) Error Messages: at-rule or selector expected (ln 1, Col 1) at-rule or selector expected (ln 51, Col 1) &bso ...

css

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery. To see my curren ...

javascriptcsshover

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js