Unable to adjust the width of a Bootstrap table

I'm currently working with a bootstrap table that looks like this 

<table class="table table-bordered table-striped table-highlight">
<tbody>
<tr>
<td align="center" style="width:30%"><input type="text"
class="form-control" id="tag" name="tag"
placeholder="Enter Tag For The Change" maxlength='140'
        > <input type="hidden"
class="form-control" id="userEmail" name="userEmail"
placeholder="Enter Tag For a Change" maxlength='140'></td>
</tr>
</tbody>
</table>

Even after setting the column width to 30%, the table still extends across the entire screen. I've also applied this CSS for the table 

table {
table-layout: fixed;
word-wrap: break-word;
}

Can anyone suggest another method to achieve this?

jqueryhtmlcsstwitter-bootstrap

Answer №1

If you're looking to reduce the size of your table and prevent it from taking up too much space on the screen, make sure your inline styling is applied correctly.

Instead of specifying the width for each <td> element, adjust the width of the entire <table>.

This adjustment should help resolve your issue:

HTML:

<table class="table table-bordered table-striped table-highlight" style="width: 30%">
    <tbody>
        <tr>
            <td align="center">
                <input type="text" class="form-control" id="tag" name="tag" placeholder="Enter Tag For The Change" maxlength='140' /> 
                <input type="hidden" class="form-control" id="userEmail" name="userEmail" placeholder="Enter Tag For a Change" maxlength='140'/>
            </td>
        </tr>
    </tbody>
</table>

CSS:

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Check out this Bootply link to see this solution in action.

Answer №2

Utilizing a table for design layout rather than data is not recommended. I suggest opting for the grid system approach, as shown below:

<div class="row">
  <div class="col-md-4">
    <input type="text" class="form-control" id="tag" name="tag" placeholder="Enter Tag For The Change" maxlength="140"> <input type="hidden" class="form-control" id="userEmail" name="userEmail" placeholder="Enter Tag For a Change" maxlength="140">
  </div>
</div>

If you insist on using the table, it's possible to adjust its width by overriding the default setting:

<table class="table table-bordered table-striped table-highlight" style="width:30% !important;">

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

Get rid of Jquery from the element and then apply it again?

I have implemented the wickedpicker plugin on a page that contains 2 time fields. I am struggling to update the time in each field separately when a button is clicked. It seems like the script is already bound to the input element which is causing issues ...

jquerybindreloadwickedpicker

Implement a fade-in animation with opacity on the background image when the page is loaded

Is there a way to create a background image that fades in from invisible opacity to 50% opacity and remains there using only CSS, without any JavaScript? I came across a similar question on Stack Overflow, but the solution seemed too complicated for me. Pe ...

htmlcss

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

What is the best way to make floating images fill the entire space?

I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...

htmlcss

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

javascripthtmljquerycss

jQuery- Oscillating navigation bar

My goal is to create a menubar that expands upward when a user hovers over a tab with their mouse. The functionality works well, but there is one issue: if the user moves the cursor quickly above the tab, it starts moving up and down rapidly, creating a fl ...

jquery

Automatically play the elements within a div using jQuery

I have various sections within different divs that I want to display without the need for manual clicking on tabs. While I've been able to toggle the visibility of these sections by clicking, I would prefer them to display automatically in a loop usin ...

javascriptjqueryhtmlcss

"Adding properties to objects in a map: a step-by-step guide

During my attempt to add a property within a map loop, I noticed that the update appeared to occur on a duplicate rather than the original object. MY_ARRAY.map(function(d){ d.size = DO_SOMETHING }); ...

javascriptjquery

Styling with CSS 3: Adding Shadows and Rounded Edges

Encountered an intriguing discovery and I'm hoping you can shed some light on it. Here's the code in question: width:940px; margin:0 auto; padding:13px 29px 39px 31px; background:#fff; -webkit-border-radius:10px; -moz-border-radius:1 ...

css

Is it possible for Embedded Youtube videos to be restricted to playing only one time?

Is it possible to restrict my YouTube video from playing more than once? I am using an iframe and have been unable to find a solution online. Any assistance on this matter would be greatly appreciated! ...

htmliframeyoutubeyoutube-iframe-api

The container within the div element needs to extend to the full width of the webpage

Hello, I am in the process of designing a small website. So far, everything is set up well with the header, but I am facing some issues with the content divs. The problem specifically arises when trying to make the content fill the entire height of the we ...

htmlcssheightstyling

Guide to inserting multiple data into 2 database tables using jquery in asp.net mvc

enter image description hereThis is my database and code: Upon registration, only the student table is updated while the section table remains unchanged. Can someone please assist me with this issue? Thank you. function SignUp() { $("#Sho ...

jqueryasp.netajaxasp.net-mvc

What is the best way to change the value of an input element (with type='month') to a string format "yyyy-MM"?

Need help converting the input value (type: month) to the format "yyyy-MM". HTML code snippet: <input class="bg-success btn btn-dark" type="month" id="timeCheckTimeSheets" ng-model="month"> AngularJS snippet: $http({ url: url + $scope.p ...

javascripthtmlangularjs

Set a specific width for inline list items

When it comes to having list items with images on the left and text on the right, the issue arises when each image is of a different width. This can cause the text to not align vertically next to their respective images. Is there a way to ensure that t ...

htmlcss

Selecting checkboxes based on a delimited string containing specific values can be done using Javascript

I have a set of checkboxes similar to the ones below that I would like to select based on database values. If I convert the database values into a string format like DC0|100;DK0|100;DM0-SRM|200;DR0|300 (delimited by semicolons or another delimiter), how ca ...

javascriptjquery

How to Modify the Image Shown When Sharing the Website on Facebook?

When you post a link or website on Facebook, the platform scrapes images from the link to visually represent the story. However, since Facebook has a white background, images with white backgrounds don't display well in this context. I'm wonderi ...

phpjavascriptjqueryhtml

Troubleshooting Issue with Bootstrap 4 and Rails 6: Unusual Error Message in ".js.erb" File - Issue with $(...).modal Functionality (Works in Other .js Files)

I'm currently working on integrating Bootstrap modals into a Rails 6 project. The modal comprises a form that utilizes Ajax for submission. My objective is to automatically hide the modal upon successful form submission. However, if there are errors d ...

jqueryhtmlruby-on-railsbootstrap-4bootstrap-modal

Tips for replicating background-image appearance while ensuring compatibility with printing requirements

Is there a way to crop images horizontally using CSS, while keeping the images visible during printing? I am currently utilizing background-image to crop images to a width of 200px without knowing the image widths in advance. My goal is to have the middle ...

htmlcss

Preventing the use of zero as the first character in the text input field

Utilizing AngularJS and jQuery along with Javascript, I have encountered an issue. While the code works perfectly in JSFiddle, it fails to function on a JSP page. $('input#myId').keypress(function(e){ if (this.value.length == 0 &am ...

javascriptjqueryangularjsjsp

Conceal choices within a Vimeo video

Is it possible to conceal specific elements such as the title, logo, like and watch buttons on a Vimeo video while still displaying the play/pause button? I attempted to use CSS and JavaScript to accomplish this, but was unsuccessful due to the video being ...

javascriptjavajquerycssvimeo