jquery UI tabs width 100%
Via CSS set:
.ui-tabs .ui-tabs-nav li {
width:50%;
}
Note due to padding, margins, and borders you may need to reduce it to less than 50%.
Update: If you want to center the text in the tabs, you need to make two CSS changes (keeping the 50% change from above).
.ui-tabs .ui-tabs-nav li {
width:50%;
text-align: center;
}
.ui-tabs .ui-tabs-nav li a {
display: inline-block;
float: none;
padding: 5px;
text-decoration: none;
width: 100%;
}
Note that you can tweak the padding as needed.
With Flexbox it's flexible and easier:
.ui-tabs .ui-tabs-nav {
display: flex;
}
.ui-tabs .ui-tabs-nav li {
flex: 1;
display: flex;
/* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */
white-space: normal;
}
.ui-tabs .ui-tabs-nav li a {
flex: 1;
/* If you want to align tab titles center */
text-align: center;
}