Необходимо переопределить некоторые стили

Question

Привет Моя таблица начальной загрузки не выглядит идеально.
Существуют некоторые внешние стили, которые требуются для других страниц, которые применяются к моей таблице из моей пользовательской CSS.
IЯ должен уменьшить пространство после столбцов моей таблицы начальной загрузки.Мне нужно переопределить эти стили.

Пожалуйста, помогите мне переопределить эти стили и выглядеть идеально.

<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>
	

Привет Моя таблица начальной загрузки не выглядит идеально. Существуют некоторые внешние стили, которые требуются для других страниц, которые применяются к моей таблице из моего пользовательского CSS.чтобы уменьшить пространство после столбцов моей таблицы начальной загрузки.Мне нужно переопределить эти стили.

Answer 1

Удалить все display свойства, назначенные:

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

Узлы таблицы имеют свое собственное поведение и предназначены для блокировки в пределах тега <table>.

Демо

---

.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>

Answer 2

Прежде всего, примените класс к элементу <table>, а затем CSS нацеливает различные элементы таблицы через класс, например, .my-table td { font-weight: 700 }

Примечание: статья Криса Койерса Фиксированные макеты таблиц

Существует свойство CSS для таблиц, которое, как мне кажется, хорошо поддерживается, малоизвестно и супер полезно.Это меняет способ отображения таблиц таким образом, что дает вам более прочный, более предсказуемый макет.

table {
  table-layout: fixed;
}

Answer 3

Я хочу помочь вам в кодировании ... но лучше разобраться самому, чтобы быть хорошим разработчиком в долгосрочной перспективе.Я дам вам некоторые ресурсы и идеи о том, как решить вашу проблему в CSS.Я не CSS ниндзя, но я один из авторов библиотеки animate.css.

Вот замечательный ресурс: https://marksheet.io/css-priority.html Вы можете попробовать использовать другой метод приоритетов при использовании CSS.

Если вы поместите свою таблицу стилей ниже, она станет приоритетом в вашей работе.

Пример:

<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">

Возможно, вам придется проверить эту таблицу для лучшего понимания ...
Каковы приоритеты среди селекторов CSS

Также проверьте это: https://www.w3.org/TR/CSS21/cascade.html#cascade

Лучше прочитать также это ... https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Идея и подсказка здесь - это CSS Priority:)

Я просто даю вам идею, как исправить вашу проблему, а не кормить ложкой ... Надеюсь, это решит вашу проблему.Хорошо!