Question

嗨我的自助表看起来并不完美从我的自定义css应用到我的表的其他页面需要一些外部样式我必须缩小我的引导表列之后的空间。我需要覆盖这些样式。

请帮我修饰这些款式，看看桌子是否完美。

＆＃13;

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

＆＃13;

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

＆＃13;

您好我的引导程序表看起来并不完美。从我的自定义css应用到我的表的其他页面需要一些外部样式我必须缩小我的引导表列之后的空间。我需要覆盖这些样式。

Answer 1

我想帮助你编写代码...但是从长远来看，最好自己想成为一名优秀的开发人员。我将为您提供有关如何在CSS中解决问题的一些资源和想法。我不是CSS Ninja，但我是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">

您可能需要检查一下以便更好地理解...
What are the priorities among CSS selectors

同时检查一下：https://www.w3.org/TR/CSS21/cascade.html#cascade

最好还读这个...... https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

这里的想法和线索是CSS优先级：）

我只是告诉你如何解决你的问题，而不是勺子喂养...我希望这将解决你的问题。好吗！

Answer 2

删除分配给的所有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 3

首先，将一个类应用于<table>元素，然后CSS通过类定位各种表元素，例如.my-table td { font-weight: 700 }

请注意Chris Coyiers的文章Fixed Table Layouts

在我看来，表格有一个CSS属性支持良好，鲜为人知，超级有用。它改变了方式表格被渲染，以便它给你一个更坚固，更多可预测的布局。
table {
  table-layout: fixed;
}

需要覆盖一些样式

3 个答案:

演示