【发布时间】：2015-07-17 10:18:29
【问题描述】：
我有两个与 Table 相关的 CSS 文件和一个用于 datepicker 的 css。但是 patepicker 正在访问 table css 的属性。所以我的问题是如何限制 datepicker 访问 table CSS。
【问题讨论】：
标签： javascript jquery html css datepicker
【发布时间】：2015-07-17 10:18:29
【问题描述】：
为什么不使用带有 ID 选择器的表格。
table#phone {
/* your css styling code here */
}
【讨论】：
-
不是它不工作，你可以分享我的演示，以便更好地理解你能给我演示一下吗？
在您的表格文件中，使用 :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 width="100%" height="5%" 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" width="100%" 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 搞砸了