blocks|key|883020|text|在您的表文件中，使用:not+Selector来选择除de+Datepiker选项卡之外的所有表元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883021|exp：|883022|+table:not(.Datepiker)+{
++++//table+style+here+excep+Datepiker
++++}
+table:not(.Datepiker)+tr+{
++++//table+style+here+excep+Datepiker
++++}|code-block|syntax|javascript|883023|​|883024|++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%25;
++++}

++++table:not(.ui-datepicker-calendar)+td:before+{++++++++++
++++++++position:+absolute;+++++++++
++++++++//top:+4px;+++++++++
++++++++left:+4px;
++++++++//width:+45%25;
++++++++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+%2B+border+values+*/
float:+left;
}

#sidebar+{
width:+auto;
float:+left;
}|883025|<!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">++++
+++++++
++++<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>+
	
+++++
++++<script+src="JS/Basic.validation.js"></script>+
++++
++++
++++<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>+++
++++
++++<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>
	
	
	<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>	
++
</head>
	
++++<body>
++++<form+name="Basicinfo"+id="Basicinfo"+method="post"+action="Basic.html">
++++
++	<p><strong>Admission+Application+-+Basic+Info</strong></p>+++++++++++
++++<div+width="100%25"+height="5%25"+name="Applnbr"+name="Applnbr">Application+Nbr+&nbsp;&nbsp;&nbsp;<span+id="Application_Id">#NEW</span>
	<input+type="hidden"+name="Appnbr"+id="Appnbr"+value=""/>
++++</div>
++++
++++
	<div+class="columnsContainer">
	++++
	++++
	++	<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%25">*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:
+			
++++++++++++++<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">
				
+++++++++++++++++++++:%25bind(:3);
++++++++++++++++</select>++++++++++++
++++++++++++</br>+</br>+*Regional+Preference:
++++++++++++	<select+name="religious"+id="religious">
				
+++++++++++++++++++++:%25bind(:4);
++++++++++++++++</select>
++++++++++</div>
++++++++
		<table++id="phone"+width="100%25"+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%25">
				
				%25bind(: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="%2B"+class="add">
+++++				<input+type="button"+value="-"+class="delete">
++++			</td>
			</tr>
		</table>
		<p></p>
		
		
	++	<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>
		
	</form>
++</body>
</html>|883026|883027|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|U|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|O|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>In your table file use :not Selector to select all table elements except for de Datepiker tab </p>

<p>exp: </p>

<pre><code> table:not(.Datepiker) {
    //table style here excep Datepiker
    }
 table:not(.Datepiker) tr {
    //table style here excep Datepiker
    }
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>  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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
	&lt;title&gt;Website&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="CSS/custom_style.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="CSS/tableStyle.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="CSS/tableStyleResponsive.css"&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;    
    &lt;!-- Required For date picker --&gt;   
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;   
    
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
	&lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt; 
	
    &lt;!-- Required For Validation--&gt; 
    &lt;script src="JS/Basic.validation.js"&gt;&lt;/script&gt; 
    
    &lt;!-- Required For Table Responsive--&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt; 
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;   
    &lt;!-- Date Picker --&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
	&lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
	
	&lt;!-- Date Picker JS And CSS  --&gt;
	&lt;style&gt;
    #ui-datepicker-div { font-size: 12px; } 
    #datepicker{}
    &lt;/style&gt;
    &lt;script&gt;
    $(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'
	   });

    });
  &lt;/script&gt;	
  &lt;!--&lt;script&gt;
	$(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;
			}		
	});
});   
&lt;/script&gt; --&gt;
&lt;/head&gt;
	&lt;!-- Body Started--&gt;
    &lt;body&gt;
    &lt;form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"&gt;
    &lt;!-- Start Header --&gt;
  	&lt;p&gt;&lt;strong&gt;Admission Application - Basic Info&lt;/strong&gt;&lt;/p&gt;           
    &lt;div width="100%" height="5%" name="Applnbr" name="Applnbr"&gt;Application Nbr &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span id="Application_Id"&gt;#NEW&lt;/span&gt;
	&lt;input type="hidden" name="Appnbr" id="Appnbr" value=""/&gt;
    &lt;/div&gt;
    &lt;!-- End Header--&gt;
    &lt;!-- Strat of First Div--&gt;
	&lt;div class="columnsContainer"&gt;
	    &lt;!-- Left Div Start--&gt;
	    &lt;!-- Other Information Field Starts--&gt;
	  	&lt;div class="leftColumn"&gt;
	  		&lt;div&gt;
            	&lt;label id="doblbl" style="margin-left:10px;"&gt;Date Of Birth:&lt;label style="margin-left:50px;"&gt;&lt;/label&gt;
            		&lt;input id="dob" name="dob" type="text" value=""&gt;
            	&lt;/label&gt;
        	&lt;/div&gt;&lt;/br&gt;
       		&lt;div&gt;          
            	&lt;label id="MMFnamelbl" style="margin-left:10px;"&gt;Mother's Maiden Name:&lt;/br&gt;
            		&lt;label style="margin-left:10px;"&gt;*First name:&lt;/label&gt;&lt;label style="margin-left:50px;"&gt;&lt;/label&gt;
            		&lt;input id="MMFname" name="MMFname" type="text" value=""  style="margin-left:10px;" &gt;
            	&lt;/label&gt;
        	&lt;/div&gt;&lt;/br&gt;
        	&lt;div&gt;
            	&lt;label id="MMLnamelbl" style="margin-left:10px;"&gt;*Last name:&lt;label style="margin-left:50px;"&gt;&lt;/label&gt;
            		&lt;input id="MMLname" name="MMLname" type="text" value=""  style="margin-left:10px;" &gt;
            	&lt;/label&gt;
        	&lt;/div&gt;&lt;/br&gt;
        	&lt;div&gt;
            	&lt;label id="passport_numberlbl" style="margin-left:10px;"&gt;*Passport Number:&lt;label style="margin-left:10px;"&gt;&lt;/label&gt;
            		&lt;input id="passport_number" name="passport_number" type="text" value=""  style="margin-left:10px;" &gt;
            	&lt;/label&gt;
            &lt;/div&gt;&lt;/br&gt;
            &lt;div&gt;
            	&lt;label id="Place_of_Issuelbl" style="margin-left:10px;"&gt;*Place of issue:&lt;label style="margin-left:30px;"&gt;&lt;/label&gt;
            		&lt;input id="Place_of_Issue" name="Place_of_Issue" type="text" value=""  style="margin-left:10px;" &gt;
            	&lt;/label&gt;
            &lt;/div&gt;&lt;/br&gt;
            &lt;div&gt;
                &lt;label id="Issue_datelbl" style="margin-left:10px;"&gt;*Issue Date:&lt;label style="margin-left:50px;"&gt;&lt;/label&gt;
            		&lt;input id="Issue_date" name="Issue_date" type="text" value=""  style="margin-left:10px;margin-top:10px;"&gt;
            	&lt;/label&gt;
            &lt;/div&gt;&lt;/br&gt;
            &lt;div&gt;
                &lt;label id="Passport_expiry_datelbl" style="margin-left:10px;"&gt;*Expiry:&lt;label style="margin-left:70px;"&gt;&lt;/label&gt;
            		&lt;input id="Passport_expiry_date" name="Passport_expiry_date" type="text" value=""  style="margin-left:10px;"&gt;
            	&lt;/label&gt;
           	&lt;/div&gt;
          &lt;/div&gt;   
          &lt;div class="rightColumn" style="width:50%"&gt;*Gender:
            &lt;input checked="checked" name="Gender" type="radio" value="M" /&gt;Male
            &lt;input name="Gender" type="radio" value="F" /&gt;Female
            &lt;/br&gt; &lt;/br&gt;*Nationality:
            &lt;select name="Nationality" id="Nationality"&gt;
           	 	&lt;option value="UAE"&gt;UAE&lt;/option&gt;
             	&lt;option value="ARE" selected&gt;ARE&lt;/option&gt;
				&lt;option value="USA"&gt;USA&lt;/option&gt;
				&lt;option value="IND"&gt;IND&lt;/option&gt;
            &lt;/select&gt;
               &lt;/br&gt;&lt;/br&gt;*Country Of Residency:
            	&lt;select name="Residency_country" id="Residency_country" onclick ="disableNational_ID();"&gt;
                    &lt;option selected="selected" value="UAE"&gt;UAE&lt;/option&gt;
                    &lt;option value="ARE"&gt;ARE&lt;/option&gt;
                    &lt;option value="USA"&gt;USA&lt;/option&gt;
					&lt;option value="IND"&gt;IND&lt;/option&gt;
                &lt;/select&gt;
              &lt;/br&gt;&lt;/br&gt;*National Id:
 			&lt;!--  &lt;label id="Emirateslbl" style="margin-left:70px;"&gt;*National Id:&lt;/label&gt; --&gt;
              &lt;input id="Emirates_Id" name="Emirates_Id" type="text" value=""  style="margin-left:10px;" &gt;
              &lt;/br&gt;&lt;/br&gt;*Marital Status:
            	&lt;select name="marital_status" id="marital_status"&gt;
				&lt;!-- Dropdown will be filled from Xlatitem table --&gt;
                     :%bind(:3);
                &lt;/select&gt;            
            &lt;/br&gt; &lt;/br&gt; *Regional Preference:
            	&lt;select name="religious" id="religious"&gt;
				&lt;!-- Dropdown will be filled from Religious table --&gt;
                     :%bind(:4);
                &lt;/select&gt;
          &lt;/div&gt;
        &lt;!-- Phone Entry table ends--&gt;
		&lt;table  id="phone" width="100%" name="phone"&gt;
			&lt;tr&gt;
				&lt;td colspan="5" bgcolor="#5C85B3"&gt;Phone&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;th&gt;Type&lt;/td&gt;
				&lt;th&gt;Country Code&lt;/th&gt;
				&lt;th&gt;*Phone&lt;/th&gt;
				&lt;th&gt;Preferred&lt;/th&gt;
				&lt;th&gt;Add/Delete&lt;/th&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;
				&lt;select name="phntype" id="phntype" style="width:50%"&gt;
				&lt;!-- Phone Types --&gt;
				%bind(:6);
				&lt;/select&gt;
				&lt;/td&gt;
				&lt;td&gt;
				&lt;input type="text" name="cntrycde" id="cntrycde" value=""&gt;
				&lt;/td&gt;
				&lt;td&gt;
				&lt;input type="text" name="phone_no" id="phone_no" value=""&gt;
				&lt;/td&gt;
				&lt;td&gt;
				&lt;input type="hidden" name="prefferd" value="NO"&gt;
				&lt;input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();"&gt;
				&lt;/td&gt;
				&lt;td&gt;
    				&lt;input type="button" value="+" class="add"&gt;
     				&lt;input type="button" value="-" class="delete"&gt;
    			&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;
		&lt;p&gt;&lt;/p&gt;
		&lt;!-- Phone Entry table ends--&gt;
		&lt;!-- Footer Of The Page--&gt;
	  	&lt;footer&gt;*How do you Learn about side:&lt;/label&gt; 
	    	&lt;select name="source" id="source"&gt;
				&lt;option selected="selected" value="internet"&gt;Internet&lt;/option&gt;
				&lt;option value="Media"&gt;Media&lt;/option&gt;
				&lt;option value="Newspaper"&gt;Newspaper&lt;/option&gt;
			&lt;/select&gt;
				&lt;input type="Submit" value="Submit And Next" style="float:right"&gt;
		&lt;/footer&gt;
		&lt;!-- Footer Ends--&gt;
	&lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|437792|text|为什么不使用带有ID选择器的表呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437793|table#phone+{
++++/*+your+css+styling+code+here+*/
}|code-block|syntax|javascript|437794|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why don't you use table with ID selector. </p>

<pre><code>table#phone {
    /* your css styling code here */
}
</code></pre>


<p>I have two CSS files related to Table and one css for datepicker .But the patepicker is acccessing the properties of table css.So my question is how to restrict the datepicker to access the table CSS.</p>


How to restrict the datepicker to inherit the CSS related to table?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有两个与表相关的CSS文件和一个用于datepicker .But的css文件，patepicker正在访问表css.So的属性，我的问题是如何限制datepicker访问表CSS。

问如何限制datepicker继承与表相关的CSS？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制datepicker继承与表相关的CSS？EN