如何限制 datepicker 继承 table 相关的 CSS？
Posted
技术标签:
【中文标题】如何限制 datepicker 继承 table 相关的 CSS？【英文标题】：How to restrict the datepicker to inherit the CSS related to table? 【发布时间】：2015-07-17 10:18:29 【问题描述】：我有两个与 Table 相关的 CSS 文件和一个用于 datepicker 的 css。但是 patepicker 正在访问 table css 的属性。所以我的问题是如何限制 datepicker 访问 table CSS。
【问题讨论】：
【参考方案1】：为什么不使用带有 ID 选择器的表格。
table#phone
/* your css styling code here */
【讨论】：
不是它不工作，你可以分享我的演示，以便更好地理解你能给我演示一下吗？【参考方案2】：在您的表格文件中，使用 :not Selector 选择除日期派克选项卡以外的所有表格元素
exp：
table:not(.Datepiker)
//table style here excep Datepiker
table:not(.Datepiker) tr
//table style here excep Datepiker
tablestyle.css
------------------
@charset "utf-8";
table:not(.ui-datepicker)
font-family: Arial,sans-serif;
font-size: 8pt;
border: 1px solid black;
border-collapse:collapse;
border-spacing:5px;
table:not(.ui-datepicker-calendar) tr:nth-child(odd)
//background:#b8d1f3;
background:rgb(233,237,244);
table:not(.ui-datepicker-calendar) tr:nth-child(even)
//background:#dae5f4;
background:rgb(211,220,232)
table:not(.ui-datepicker-calendar) th
//background:#666;
background:rgb(92,133,179);
color:white;
font-weight: bold;
text-decoration: underline;
table:not(.ui-datepicker-calendar) td
padding: 5px;
font-size: 9pt;
border: 1px solid green;
table:not(.ui-datepicker-calendar):hover //outline: 2px dashed #0090D2;
table:not(.ui-datepicker) input[type='text']
width:120px;
tablestyleresponsive.css
----------------------------------
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr
display: block;
/* Hide table headers (but not display: none;, for accessibility) */
table:not(.ui-datepicker-calendar) thead tr, th
position: absolute;
top: -9999px;
left: -9999px;
table:not(.ui-datepicker-calendar) tr border: 1px solid #ccc;
table:not(.ui-datepicker-calendar) td
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
table:not(.ui-datepicker-calendar) td:before
position: absolute;
//top: 4px;
left: 4px;
//width: 45%;
padding-right: 10px;
white-space: nowrap;
/* Label the data*/
#Phone td:nth-of-type(1):before content: "Type";
#Phone td:nth-of-type(2):before content: "Country";
#Phone td:nth-of-type(3):before content: "Phone";
#Phone td:nth-of-type(4):before content: "Preferred";
#Phone td:nth-of-type(4):before content: "Add/Delete";
#Major td:nth-of-type(1):before content: "Preferred";
#Major td:nth-of-type(2):before content: "Major";
#Major td:nth-of-type(3):before content: "Concentration";
#Major td:nth-of-type(4):before content: "Status";
#Education thead:nth-of-type(1):before content: "#Educational Information";
#Education td:nth-of-type(1):before content: "School Code";
#Education td:nth-of-type(2):before content: "School Name";
#Education td:nth-of-type(3):before content: "High school Average";
#Education td:nth-of-type(4):before content: "GPA Type";
#Education td:nth-of-type(5):before content: "CGPA";
#Education td:nth-of-type(6):before content: "Accdemic Level";
#Education td:nth-of-type(7):before content: "Degree";
#Education td:nth-of-type(8):before content: "Degree Date";
#Education td:nth-of-type(9):before content: "Transcript Date";
#Education td:nth-of-type(10):before content: "Add/Delete";
#Test td:nth-of-type(1):before content: "Preference";
#Test td:nth-of-type(2):before content: "Major";
#Test td:nth-of-type(3):before content: "Concentration";
#Test td:nth-of-type(4):before content: "Status";
#Test td:nth-of-type(5):before content: "Add/Delete";
#Employee td:nth-of-type(1):before content: "Job_title";
#Employee td:nth-of-type(2):before content: "Employer";
#Employee td:nth-of-type(3):before content: "From";
#Employee td:nth-of-type(4):before content: "To";
#Employee td:nth-of-type(5):before content: "Add/Delete";
#Emergency_Contact td:nth-of-type(1):before content: "Relationship";
#Emergency_Contact td:nth-of-type(2):before content: "First Name";
#Emergency_Contact td:nth-of-type(3):before content: "Last Name";
#Emergency_Contact td:nth-of-type(4):before content: "Phone";
#Emergency_Contact td:nth-of-type(5):before content: "Email Id";
#Emergency_Contact td:nth-of-type(6):before content: "Consent";
#Emergency_Contact td:nth-of-type(7):before content: "Working/Student";
#Emergency_Contact td:nth-of-type(8):before content: "Employee/Student ID";
#Emergency_Contact td:nth-of-type(9):before content: "Add/Delete";
#Personal_document td:nth-of-type(1):before content: "Attachment type";
#Personal_document td:nth-of-type(2):before content: "Attached File";
#Personal_document td:nth-of-type(3):before content: "View";
#Personal_document td:nth-of-type(4):before content: "Add Attachment";
#Personal_document td:nth-of-type(5):before content: "Accepted";
#Personal_document td:nth-of-type(6):before content: "Rejection Reason";
#Accademic_Transcripts td:nth-of-type(1):before content: "Attached File";
#Accademic_Transcripts td:nth-of-type(2):before content: "View";
#Accademic_Transcripts td:nth-of-type(3):before content: "Add Attachment";
#Accademic_Transcripts td:nth-of-type(4):before content: "Accepted";
#Accademic_Transcripts td:nth-of-type(5):before content: "Rejection Reason";
#Accademic_Transcripts td:nth-of-type(6):before content: "Add/Delete";
#Accademic_Documents td:nth-of-type(1):before content: "Attached File";
#Accademic_Documents td:nth-of-type(2):before content: "View";
#Accademic_Documents td:nth-of-type(3):before content: "Add Attachment";
#Accademic_Documents td:nth-of-type(4):before content: "Accepted";
#Accademic_Documents td:nth-of-type(5):before content: "Rejection Reason";
#Accademic_Documents td:nth-of-type(6):before content: "Add/Delete";
#Other_Document td:nth-of-type(1):before content: "Attached File";
#Other_Document td:nth-of-type(2):before content: "View";
#Other_Document td:nth-of-type(3):before content: "Add Attachment";
#Other_Document td:nth-of-type(4):before content: "Accepted";
#Other_Document td:nth-of-type(5):before content: "Rejection Reason";
#Other_Document td:nth-of-type(6):before content: "Add/Delete";
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
body
padding: 0;
margin: 0;
width: 320px;
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
body
//width: 495px;
#content
width: auto;
float: left;
#middle
width: auto; /* Account for margins + border values */
float: left;
#sidebar
width: auto;
float: left;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/custom_style.css">
<link rel="stylesheet" type="text/css" href="CSS/tableStyle.css">
<link rel="stylesheet" type="text/css" href="CSS/tableStyleResponsive.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Required For date picker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Required For Validation-->
<script src="JS/Basic.validation.js"></script>
<!-- Required For Table Responsive-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Date Picker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Date Picker JS And CSS -->
<style>
#ui-datepicker-div font-size: 12px;
#datepicker
</style>
<script>
$(function()
$("#dob").datepicker(
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only on clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
duration: 'fast',
dateFormat: 'dd-mm-yy'
);
$("#Issue_date").datepicker(
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only on clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
duration: 'fast',
dateFormat: 'dd-mm-yy'
);
$("#Passport_expiry_date").datepicker(
//showOn: both - datepicker will appear clicking the input box as well as the calendar icon
//showOn: button - datepicker will appear only on clicking the calendar icon
showOn: 'button',
//you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
duration: 'fast',
dateFormat: 'dd-mm-yy'
);
);
</script>
<!--<script>
$(document).ready(function()
$("input.add").live('click', function()
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
);
$("input.delete").live('click',function()
if(document.getElementById('phone').getElementsByTagName("tr").length!=3);
var $tr = $(this).closest('tr');
$tr.remove();
return false;
);
);
</script> -->
</head>
<!-- Body Started-->
<body>
<form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html">
<!-- Start Header -->
<p><strong>Admission Application - Basic Info</strong></p>
<div name="Applnbr" name="Applnbr">Application Nbr <span id="Application_Id">#NEW</span>
<input type="hidden" name="Appnbr" id="Appnbr" value=""/>
</div>
<!-- End Header-->
<!-- Strat of First Div-->
<div class="columnsContainer">
<!-- Left Div Start-->
<!-- Other Information Field Starts-->
<div class="leftColumn">
<div>
<label id="doblbl" style="margin-left:10px;">Date Of Birth:<label style="margin-left:50px;"></label>
<input id="dob" name="dob" type="text" value="">
</label>
</div></br>
<div>
<label id="MMFnamelbl" style="margin-left:10px;">Mother's Maiden Name:</br>
<label style="margin-left:10px;">*First name:</label><label style="margin-left:50px;"></label>
<input id="MMFname" name="MMFname" type="text" value="" style="margin-left:10px;" >
</label>
</div></br>
<div>
<label id="MMLnamelbl" style="margin-left:10px;">*Last name:<label style="margin-left:50px;"></label>
<input id="MMLname" name="MMLname" type="text" value="" style="margin-left:10px;" >
</label>
</div></br>
<div>
<label id="passport_numberlbl" style="margin-left:10px;">*Passport Number:<label style="margin-left:10px;"></label>
<input id="passport_number" name="passport_number" type="text" value="" style="margin-left:10px;" >
</label>
</div></br>
<div>
<label id="Place_of_Issuelbl" style="margin-left:10px;">*Place of issue:<label style="margin-left:30px;"></label>
<input id="Place_of_Issue" name="Place_of_Issue" type="text" value="" style="margin-left:10px;" >
</label>
</div></br>
<div>
<label id="Issue_datelbl" style="margin-left:10px;">*Issue Date:<label style="margin-left:50px;"></label>
<input id="Issue_date" name="Issue_date" type="text" value="" style="margin-left:10px;margin-top:10px;">
</label>
</div></br>
<div>
<label id="Passport_expiry_datelbl" style="margin-left:10px;">*Expiry:<label style="margin-left:70px;"></label>
<input id="Passport_expiry_date" name="Passport_expiry_date" type="text" value="" style="margin-left:10px;">
</label>
</div>
</div>
<div class="rightColumn" style="width:50%">*Gender:
<input checked="checked" name="Gender" type="radio" value="M" />Male
<input name="Gender" type="radio" value="F" />Female
</br> </br>*Nationality:
<select name="Nationality" id="Nationality">
<option value="UAE">UAE</option>
<option value="ARE" selected>ARE</option>
<option value="USA">USA</option>
<option value="IND">IND</option>
</select>
</br></br>*Country Of Residency:
<select name="Residency_country" id="Residency_country" onclick ="disableNational_ID();">
<option selected="selected" value="UAE">UAE</option>
<option value="ARE">ARE</option>
<option value="USA">USA</option>
<option value="IND">IND</option>
</select>
</br></br>*National Id:
<!-- <label id="Emirateslbl" style="margin-left:70px;">*National Id:</label> -->
<input id="Emirates_Id" name="Emirates_Id" type="text" value="" style="margin-left:10px;" >
</br></br>*Marital Status:
<select name="marital_status" id="marital_status">
<!-- Dropdown will be filled from Xlatitem table -->
:%bind(:3);
</select>
</br> </br> *Regional Preference:
<select name="religious" id="religious">
<!-- Dropdown will be filled from Religious table -->
:%bind(:4);
</select>
</div>
<!-- Phone Entry table ends-->
<table id="phone" name="phone">
<tr>
<td colspan="5" bgcolor="#5C85B3">Phone</td>
</tr>
<tr>
<th>Type</td>
<th>Country Code</th>
<th>*Phone</th>
<th>Preferred</th>
<th>Add/Delete</th>
</tr>
<tr>
<td>
<select name="phntype" id="phntype" style="width:50%">
<!-- Phone Types -->
%bind(:6);
</select>
</td>
<td>
<input type="text" name="cntrycde" id="cntrycde" value="">
</td>
<td>
<input type="text" name="phone_no" id="phone_no" value="">
</td>
<td>
<input type="hidden" name="prefferd" value="NO">
<input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();">
</td>
<td>
<input type="button" value="+" class="add">
<input type="button" value="-" class="delete">
</td>
</tr>
</table>
<p></p>
<!-- Phone Entry table ends-->
<!-- Footer Of The Page-->
<footer>*How do you Learn about side:</label>
<select name="source" id="source">
<option selected="selected" value="internet">Internet</option>
<option value="Media">Media</option>
<option value="Newspaper">Newspaper</option>
</select>
<input type="Submit" value="Submit And Next" style="float:right">
</footer>
<!-- Footer Ends-->
</form>
</body>
</html>【讨论】：
我可以在 tablestyle.css 中使用它，但在 tableresponsive.css 上有一些媒体屏幕。但是由于 datepicker 内部有一个表，所以它使用该属性，因此该属性是为所有表全局声明的在那个 CSS 中，我们如何使用上述属性来限制 CSS 属性的使用被继承 不是它不起作用，你可以分享我的演示以更好地理解 如果您减小浏览器宽度，那么您可以分析问题，这意味着它将 tableresponsive.css 文件和表格格式更改为一个月中总天数的大网格。所以我请求您请减小浏览器宽度并查看问题并给我一个解决方案。谢谢 我只更新您的代码，但问题仍未解决。 你的 CSS 搞砸了以上是关于如何限制 datepicker 继承 table 相关的 CSS？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 com.google.gwt.user.datepicker.client.DateBox 限制可用的日期范围
如何通过给出两个日期来限制 jquery datepicker 的日期范围？