Need to override some styles

Question

Hi My bootstrap table is not looking perfect.
There are some external styles that are required for other pages which are applied to my table from my custom css.
I have to shrink the space after the columns of my bootstrap table. I need to override those styles.

Please help me to overide these styles and look table perfect.

<style type="text/css">
 thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

tbody {
    overflow-y: scroll;
}

thead > tr, tbody > tr, tfoot > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

thead, tfoot {
    flex-shrink: 3;
}



th, tbody td 
{
    width: 20%; /* this can vary */
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}


.container{
  margin: 20px 0;
}
 </style>

<div class="row">
 <div class="col-md-12">
  <div class="form-group">
   <input type="submit" class="btn btn-primary addnew" value="Add New" ng-click="addNew()">
    <input ng-hide="!jobGroupDetails.length" type="button" class="btn btn-danger" ng-click="remove()" value="Remove">
    </div>
    <div class="scrollable">
     <table class="table table-striped table-bordered table-condensed">
      <thead>
       <tr>
        <th>
         <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
        </th>
        <th>JobGroupName</th>
        <th>Start Date</th>
        <th>End Date</th>
       </tr>
      </thead>
      <tbody>
       <tr ng-repeat="jobGroupDetail in jobGroupDetails">
        <td>e1</td>
        <td>e2</td>
        <td>e3</td>
       </tr>
      </tbody>
     </table>
    </div>
    <div class="text-center">
     <button type="button" class="btn btn-primary" value="Submit" ng-click="saveJobData()">Submit</button>
     <button type="button" class="btn btn-primary" value="Submit" ng-click="initiateLambda()">Initiate Lambda</button>
    </div>
   </div>
  </div>
 </div>

Hi My bootstrap table is not looking perfect.there are some external styles that are required for other pages which are applied to my table from my custom css I have to shrink the space after the columns of my bootstrap table. I need to override those styles.

score 0 · Answer 1 · 2018-06-06T17:05:37.560

0

I want to help you in coding... but it is better to figure it out by yourself to be a good developer in the long run. I will give you some resources and ideas on how to solve your issue in CSS. I am not CSS Ninja but I am one of the contributor in animate.css library.

Here is the great resource: https://marksheet.io/css-priority.html You might try to use different priority technique in using CSS.

If you put your stylesheet below it will be the priority in your work.

Example:

<link rel="stylesheet" href="assets/css/stylesheet1.css" type="text/css">
<!-- Below is the new style for the page -->
<link rel="stylesheet" href="assets/css/stylesheet2.css" type="text/css">

You might need to check this one for better understanding...
What are the priorities among CSS selectors

Also check this out: https://www.w3.org/TR/CSS21/cascade.html#cascade

Better to read also this... https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The idea and clue here is CSS Priority :)

I just give you the idea on how to fix your issue instead of spoon feeding... I hope this will solve your problem. Alright!

edited Jun 06 '18 at 17:05

answered Jun 06 '18 at 00:17

*"If you put your CSS in the top it will be the priority in your work."* Are you sure? I always thought the further a ruleset is ***down*** that it's properties will override all other matching properties that came before it (i.e. the top will be overridden by whatever comes after it). Hence the name ***Cascading*** Style Sheet, *cascading* like a waterfall. BTW, while external links are not prohibited, an answer that has ***only links*** is discouraged, posted code and some sort of an explanation is the most desired type of answer on SO. – zer00ne Jun 06 '18 at 12:54
Sorry for that, I forget this stuff... I just review the priority topic on the CSS and make some test code here. The most recent code added to the style is the most priority. If you compare the inline style vs !important then the winner is the !important. – Jun 06 '18 at 17:08
Indeed that is true `!important` will always override, but to see the behavior of cascading styles, compare 2 rulesets with identical selectors and identical properties and different values. ex. `.div0 {color:blue}` and then the next line is: `.div0 {color:red}` all `.div0` text will be red. not blue. – zer00ne Jun 06 '18 at 19:37
agree... I already tried that, also, I have a good reference for that but I forget what the link to it. The thing is the most recent is the most powerful. As additional to override the !important you need to put !important too in the inline style of the element. – Jun 06 '18 at 22:06

score 0 · Answer 2 · answered Jun 06 '18 at 00:53

Remove all display properties assigned to:

<table>, <thead>, <tbody>, <th>, <td>, <tfoot>, <tr>

Table nodes have their own behavior and are designed to interlock within the confines of a <table> tag.

Demo

.container {
  margin: 20px 0;
}

table {
  width: 100%;
}

tbody {
  overflow-y: scroll;
}

th,
td {
  max-width: 22%;
}

fieldset.btn-group.btn-group.btn-group {
  display: inline-block;
  margin: 1em 0;
  cursor: pointer
}

.textTrunc {
  position: relative;
}

.text-truncate {
  position: absolute;
  top: 0em;
  max-width: 24%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

'
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />

<main class='container'>

  <section class="row">
    <div class="col-md-12">
      <fieldset class="btn-group ">
        <input type="button" class="btn.btn btn-primary addnew" value="ADD">
        <input type="button" class="btn.btn btn-danger" value="DEL">
      </fieldset>
      <section class="scrollable">

        <table class="table table-striped table-bordered table-condensed">
          <thead>
            <tr>
              <th>
                <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
              </th>
              <th>JobGroupName</th>
              <th>Start Date</th>
              <th>End Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class='textTrunc'>
                <div class='text-truncate text-nowrap'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
              </td>
              <td class='textTrunc'>
                <div class='text-truncate text-nowrap'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
              </td>
              <td class='textTrunc'>
                <div class='text-truncate text-nowrap'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
              </td>
              <td class='textTrunc'>
                <div class='text-truncate text-nowrap'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
              </td>
            </tr>
          </tbody>
        </table>

      </section>

      <fieldset class="btn-group float-right">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-success">Initiate Lambda</button>
      </fieldset>
    </div>
  </section>
</main>

score 0 · Answer 3 · answered Jun 06 '18 at 01:25

First of all, apply a class to the <table> element and then CSS target the various table elements via the class, e.g., .my-table td { font-weight: 700 }

Note Chris Coyiers article Fixed Table Layouts

There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout.
table {
  table-layout: fixed;
}

Need to override some styles

3 Answers3

Demo